3.5.2.1.13. 日期选择器

在线示例

API 文档

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

gui datepicker mini

该组件对应的 XML 名称： datePicker

  • 可以使用dataContainer或datasource以及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 实体的数据容器 orderDc，Order 实体拥有 date 属性。XML 里面将 datePicker 的 dataContainer 属性指向这个数据容器，然后将 property 属性指向实体中需要显示在这个控件的字段。

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

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

    gui datepicker month range

  • 日期和时间的精度可以用组件的 resolution 属性来定义，这个属性的值需要是 DatePicker.Resolution 枚举类型 - DAY、MONTH 、YEAR。默认精度是 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