3.5.2.1.13. DatePicker
LIVE DEMO
API DOCS

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

gui datepicker mini

XML name of the component: datePicker.

The DatePicker component is implemented for Web Client.

  • To create a date picker associated with data, you should use the dataContainer/datasource and property attributes:

    <data>
    <instance id="orderDc"
              class="com.company.sales.entity.Order"
              view="_local">
        <loader/>
    </instance>
</data>
<layout>
    <datePicker id="datePicker"
                dataContainer="orderDc"
                property="date"/>
</layout>

    In the example above, the screen has the orderDc data container for the Order entity, which has the date property. The reference to the data container is specified in the dataContainer attribute of the datePicker component; the name of the entity attribute which value should be displayed in the field is specified in the property attribute.

  • You can specify available dates to select by using rangeStart and rangeEnd attributes. If you set them, all the dates that are outside the range will be disabled.

    <datePicker id="datePicker" rangeStart="2016-08-15" rangeEnd="2016-08-19"/>
    gui datepicker month range

  • Date accuracy can be defined using a resolution attribute. An attribute value should match the DatePicker.Resolution enumeration − DAY, MONTH, YEAR. Default resolution is DAY.

    <datePicker id="datePicker" resolution="MONTH"/>
    gui datepicker month resolution 
    <datePicker id="datePicker" resolution="YEAR"/>
    gui datepicker year resolution

  • Today’s date in the calendar is determined against current timestamp in a user’s web browser, which depends on the OS time zone settings. User’s time zone doesn’t affect this behaviour.

Attributes of datePicker

align - caption - captionAsHtml - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - datasource - datatype - description - descriptionAsHtml - editable - enable - box.expandRatio - height - id - property - rangeEnd - rangeStart - resolution - stylename - tabIndex - visible - width

API

addValueChangeListener - setContextHelpIconClickHandler