如需创建一个关联数据的日期控件，需要用 dataContainer 和 property 属性来设置：

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

如果这个控件关联实体的一个属性，它能根据实体属性的类型自动填充日期时间格式：

如果该控件不与实体属性相关联（比如没有设置数据容器和属性名称），可以使用 datatype 属性设置数据类型。 DateField 使用如下数据类型：

日期时间格式也可以通过组件的 dateFormat 属性来设置。这个属性的值可以是一个定义日期时间格式的字符串或者语言包中的一个键。

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

可以通过 rangeStart 和 rangeEnd 属性来定义可选的日期范围。一旦日期范围设定了，其它在范围之外的日期都会变成不可选状态。日期范围可以用"yyyy-MM-dd"这样的格式在界面 XML 里面配置或者在程序里通过相应的 setter 来设置。

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

DateField 组件值的变化，跟其它实现了 Field 接口的组件一样，都可以用 ValueChangeListener 来监听。可以使用isUserOriginated() 方法跟踪 ValueChangeEvent 的来源。

日期和时间的精度可以用组件的 resolution 属性来定义，这个属性的值需要是 DateField.Resolution 枚举类型 - SEC 、MIN 、HOUR 、DAY 、 MONTH 、YEAR。默认精度是 MIN，精确到分钟。

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

DateField 还可以在服务器和用户之间转换时间戳的时区，前提是用户通过 setTimeZone() 设置了时区。当这个组件绑定了一个实体里的时间戳类型的属性的时候，时区会通过当前的用户会话自动设定。如果组件没有绑定时间戳类型的属性，可以通过在界面控制器调用 setTimeZone() 手动设置时区，这样 DateField 可以自动进行时区转换。

日历中的当前日期是根据用户浏览器的时间戳确定的，依赖操作系统时区的设置。用户会话的时区不会影响此功能。

在选用 Halo-based 主题的 Web Client，如果需要无边框无背景的样式，可以通过预定义的 borderless 样式来实现。同样，也支持 XML 配置或者在界面控制器使用编程方法实现。

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

dateField.setStyleName(HaloTheme.DATEFIELD_BORDERLESS);