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

<dsContext>
    <datasource id="orderDs" class="com.sample.sales.entity.Order" view="_local"/>
</dsContext>
<layout>
    <dateField datasource="orderDs" property="date"/>

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

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"/>

Changes of the DateField value, as well as of any other components implementing the Field interface, can be tracked using a ValueChangeListener.

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..

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);