DatePicker

LIVE DEMO

DatePicker is a field to display and enter the date. It has the same view as the drop-down calendar in the DateField.

date picker

Component’s XML-name: datePicker.

Basics

DatePicker works the same as DateField, except that this component does not have TimeField to the right and less variety in configuration.

Attributes

resolution

The resolution attribute allows you to define date accuracy. It accepts the following values:

  • DAY - default value, to within a day.

  • MONTH

  • YEAR

<datePicker resolution="MONTH"/>

rangeStart and rangeEnd

You can specify available dates by using these two attributes. If a range is set, all dates outside the range will be disabled. You can set range dates in the "year-month-date" format in XML or programmatically using corresponding setters.

<datePicker rangeStart="2021-04-05"
            rangeEnd="2021-04-11"/>

All XML Attributes

align - box.expandRatio - buffered - caption - captionAsHtml - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - datatype - description - descriptionAsHtml - editable - enable - height - htmlSanitizerEnabled - icon - id - property - rangeEnd - rangeStart - resolution responsive - rowspan - stylename - tabIndex - visible - width