To create a date field associated with data, you should use the dataContainer and property attributes:

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

If the field is associated with an entity attribute, it will automatically take the appropriate form:

If the field is not connected to an entity attribute (i.e. the data container and attribute name are not set), you can set the data type using the datatype attribute. DateField uses the following data types:

You can change the date and time format using the dateFormat attribute. An attribute value can be either a format string itself or a key in a message pack (if the value starts with msg://).

<dateField dateFormat="MM/yy" caption="msg://monthOnlyDateField"/>

You can specify available dates by using rangeStart and rangeEnd attributes. If a range is set, all dates outside the range will be disabled. You can set range dates in the "yyyy-MM-dd" format in XML or programmatically by using corresponding setters.

<dateField id="dateField" rangeStart="2016-08-15" rangeEnd="2016-08-19"/>

The autofill attribute set to true enables automatical filling the current month and year after entering a day. If the attribute is disabled, the DateField resets value when the date is not fully entered.

Changes of the DateField value, as well as of any other components implementing the Field interface, can be tracked using a ValueChangeListener. The origin of the ValueChangeEvent can be tracked using isUserOriginated() method.

Date and time accuracy can be defined using a resolution attribute. An attribute value should match the DateField.Resolution enumeration − SEC, MIN, HOUR, DAY, MONTH, YEAR. Default is MIN, i.e., to within a minute.

<dateField resolution="MONTH" caption="msg://monthOnlyDateField"/>

DateField can perform timestamp value conversions between server and user time zones if the user’s time zone is set by setTimeZone() method. The time zone is assigned automatically from the current user session when the component is bound to an entity attribute of the timestamp type. If the component is not bound to such attribute, you can call setTimeZone() in the screen controller to make the DateField perform required conversions..

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.

In Web Client with a Halo-based theme, you can set predefined borderless style name to the DateField component to remove borders and background from the field. This can be done either in the XML descriptor or in the screen controller:

<dateField id="dateField"
           stylename="borderless"/>

dateField.setStyleName(HaloTheme.DATEFIELD_BORDERLESS);