The Date widget makes date and time input easier and faster.

Overview

The Date widget allows users to enter date and time in habitual format. By default, the format is determined by operational system local properties (local format). But it could be customized to any format (custom format).

To enter different types of date and time, please use appropriate type of the Date Widget:

Type

Description

Has dialog version

Auto completion

Formats accepted

Date

To enter date without time

+*

+**

  • Custom format

  • Local format

Date-time

To enter timestamp. The widget consist of 2 fields – date and time. The date and time will be validated only if both are filled.

+*

+**,***

  • Custom format

  • Local format

Time

To enter time without date

-

+***

  • Custom format

  • Local format

Day

To enter day of month

-

-

Day in range [0, 31]

Month

To enter month

-

-

Month in range [1, 12]

Year

To enter year

-

-

  • 2-digit year

  • 4-digit year

Month-day

To enter month and day

-

-

  • Month/day


Year-Month

To enter year and month

-

-

Year/Month, year could be 2 of 4-digit

* If only day and month were entered the date will be auto-completed by current year.
** Dialog version allows to modify a timestamp only with a dialog and always consists of one field.
*** If only hours were entered the time will be auto-completed by 0 minutes.

Developer documentation

Use the following code to create a Date Widget field and specify the type in "type" attribute:

<xe:date type="date"/>

Use "display-date-format" and "display-time-format" to customize input format for Date Widget. Display-date-format and display-time-format are specified by date and time pattern strings.
See java.text.SimpleDateFormat to know more about patterns accepted.

Examples of Date Widgets definition

<!--Date field-->
<xe:date label="Date" source="date" type="date" display-date-format="d.M.yyyy"  width="40mm"/>
<!--Date-time field-->
<xe:date label="Timestamp" type="date-time" source="date-time" widget-type="editfield" display-date-format="MM.yyyy" display-time-format="HH:mm"/>
<!--Time field-->
<xe:date label="Time" type="time" source="time" display-time-format="HH:mm:ss" width="40mm"/>
<!--Date and time dialog field-->
<xe:date label="Date and time"  type="date-time" source="date-time-cal" display-date-format="MM.yyyy HH:mm" width="40mm"/>
<!--Date dialog field-->
<xe:date label="Date dialog" source="date-cal" type="date" widget-type="calendar" display-date-format="MM.yyyy HH:mm" width="40mm"/>
<!--Year-Month field-->
<xe:date label="Year/Month" source="year-month" type="year-month" width="40mm"/>
<!--Month-Day field-->
<xe:date label="Month-day" source="month-day" type="month-day" width="40mm" />
<!--Day field-->
<xe:date label="Day" source="day" type="day" width="40mm" />
<!--Month field-->
<xe:date label="Month" source="month" type="month" width="40mm" />
<!--Year field-->
<xe:date label="Year" source="year" type="year" width="40mm" />
CODE