The DatePicker control provides an input field with an assigned calendar which is opened on user action.
When the user makes an entry and clicks on the enter key, the calendar shows the corresponding date. When the user makes no entry and triggers the calendar display,
the actual date is displayed.
Generally, the user enters a date in the format defined by the locale or by binding the value
property to a date type (and press F4 or click the Calendar icon next).
Alternatively, entering the date in the YYYYMMDD machine format is possible (with enter key afterwards).
The DatePicker control inherits properties from the TextField control (e.g. enabled
, required
, change
).
Following a summary of the control behavior:
F4
or Alt+Arrow down
is supported (alternatively to the calendar-button-click).
Note: For proper visualization, set rtl
as required by the locale
.
If a locale
is set on the DatePicker
the date will be displayed in the output format of
this locale. If no locale
is set, the date is displayed in the output format of the system locale SAPUI5
uses.
But if the value
property is bound to a model using a sap.ui.model.type.Date
type, the locale
property is ignored.
In this case the locale and the pattern defined in the data binding are used. The output pattern can then be defined using the pattern
or style
of this date
type while binding.
If a new value is entered in the DatePicker
it is validated using the parser of the date
type.
The change
event returns a parameter invalidValue
with true
if the entered value is not an valid date.
If the value
of the DatePicker
id filled using data binding and a date
type the ParseError
and
ValidationSuccess
events can be used to handle the input validation.
See also: TextField
The example below shows a typical DatePicker. The input validation is done using the change
event.
The example below shows two DatePickers using DataBinding. The input validation is done using the ParseError
and
ValidationSuccess
events. In the first DatePicker the output format is defined using pattern
.
In the second DatePicker the output format is defined using style
.