3.5.2.1.13. 日期选择器

在线示例

API 文档

DatePicker 是用来显示和选择日期的控件。跟DateField里面的下拉式日期选择器是有一样的外观。

gui datepicker mini

该组件对应的 XML 名称: datePicker

  • 可以使用dataContainerdatasource以及property属性来创建一个关联数据源的日期选择器:

    1. <data>
    2. <instance id="orderDc"
    3. class="com.company.sales.entity.Order"
    4. view="_local">
    5. <loader/>
    6. </instance>
    7. </data>
    8. <layout>
    9. <datePicker id="datePicker"
    10. dataContainer="orderDc"
    11. property="date"/>
    12. </layout>

    在上面这个例子中,界面有 Order 实体的数据容器 orderDcOrder 实体拥有 date 属性。XML 里面将 datePickerdataContainer 属性指向这个数据容器,然后将 property 属性指向实体中需要显示在这个控件的字段。

  • 可以通过 rangeStartrangeEnd 属性来定义可选的日期范围。一旦日期范围设定了,其它在范围之外的日期都会变成不可选状态。

    1. <datePicker id="datePicker" rangeStart="2016-08-15" rangeEnd="2016-08-19"/>

    gui datepicker month range

  • 日期和时间的精度可以用组件的 resolution 属性来定义,这个属性的值需要是 DatePicker.Resolution 枚举类型 - DAYMONTHYEAR。默认精度是 DAY

    1. <datePicker id="datePicker" resolution="MONTH"/>

    gui datepicker month resolution

    1. <datePicker id="datePicker" resolution="YEAR"/>

    gui datepicker year resolution

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


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