DatePicker

Introduction

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:

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

Example

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.


API Documentation

See API documentation