DatePicker¶

DatePicker element is an input for selecting a date. It allows users to pick a single date or a single date + time.

DatePicker¶

color-picker

DatePicker with time - date¶

color-picker

DatePicker with time - time¶

color-picker

Options¶

withTime¶

bool Optional parameter. If set to true, the element allows selecting both date and time. When enabled, the element uses a date-time picker instead of a date-only picker. Default value is false.

JSON

{
  "options": {
    "withTime": true
  }
}

Build-in Validators¶

Element validates if given value is a date in format YYYY-MM-DD when withTime is false, or YYYY-MM-DD HH:MM:SS when withTime is true.

Available Validators¶

Element does not have any available validators.

Relations Support¶

Element does not support relations between elements.

Configuration output schema¶

schema

{
  "<element_type>" : "datePicker",
  "<element_name>" : string,
  "<element_label>" : string,
  "<element_labelDescription>" : string,
  "<element_isRequired>" : bool,
  "<element_isHidden>" : bool,
  "<element_defaultValue>" : string,
  "<element_options>" : {
    "<element_option_withTime>" : bool
  }
}

example

{
  "type" : "datePicker",
  "name" : "date",
  "label" : "Pick date",
  "labelDescription" : "Select a date for the event",
  "isRequired" : true,
  "isHidden" : false,
  "defaultValue" : "2025-12-08",
  "options": {
    "withTime" : false
  }
}

example with time

{
  "type" : "datePicker",
  "name" : "dateTime",
  "label" : "Event date and time",
  "labelDescription" : "Select date and time for the event",
  "isRequired" : true,
  "defaultValue" : "2025-12-08 14:30:00",
  "options": {
    "withTime" : true
  }
}

Element value¶

Element has different value format depending on location in the system

The format of this element's value differs depending on where it is used in the system.

In SVE "defaultValue" and "value" format depends on configuration: - When withTime is false: YYYY-MM-DD - When withTime is true: YYYY-MM-DD HH:MM:SS

In Twig, the value is converted to a different format: - When withTime is false: DD.MM.YYYY - When withTime is true: DD.MM.YYYY HH:MM:SS

usage in module TWIG - date only

<div>
  <b>date</b><p>{{ moduleConfig.date }}</p></br>
</div>

html output

<div>
  <b>date</b><p>08.12.2025</p></br>
</div>

usage in module TWIG - with time

<div>
  <b>datetime</b><p>{{ moduleConfig.dateTime }}</p></br>
</div>

html output

<div>
  <b>datetime</b><p>08.12.2025 14:30:00</p></br>
</div>

Example of module¶

DatePicker (date only)¶

Twig¶

Twig

<div>
  <b>date</b><p>{{ moduleConfig.date }}</p>
</div>

JSON configuration

[
  {
    "label": "EXAMPLE",
    "state": "unfolded",
    "elements": [
      {
        "name": "date",
        "type": "datePicker",
        "hint": "Select date for the event",
        "label": "Event date",
        "labelDescription": "Select date for the event",
        "isRequired": true,
        "defaultValue": "2025-12-08"
      }
    ]
  }
]

DatePicker with time¶

Twig¶

Twig

<div>
  <b>datetime</b><p>{{ moduleConfig.dateTime }}</p>
</div>

JSON configuration

[
  {
    "label": "EXAMPLE",
    "state": "unfolded",
    "elements": [
      {
        "name": "dateTime",
        "type": "datePicker",
        "hint": "Select date and time for the event",
        "options": {
          "withTime": true
        },
        "label": "Event date and time",
        "labelDescription": "Select date and time for the event",
        "isRequired": true,
        "defaultValue": "2025-12-08 14:30:00"
      }
    ]
  }
]