DatePicker Enables the users to select a localized date between 0001-01-01 and 9999-12-31. <h3>Overview</h3> The <code>DatePicker</code> lets the users select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker. <b>Note:</b> The {@link sap.ui.unified.Calendar} is used internally only if the <code>DatePicker</code> is opened (not used for the initial rendering). If the <code>sap.ui.unified</code> library is not loaded before the <code>DatePicker</code> is opened, it will be loaded upon opening. This could lead to a waiting time when the <code>DatePicker</code> is opened for the first time. To prevent this, apps using the <code>DatePicker</code> should also load the <code>sap.ui.unified</code> library. <h3>Usage</h3> The user can enter a date by: <ul><li>Using the calendar that opens in a popup</li> <li>Typing it in directly in the input field</li></ul> On app level, there are two options to provide a date for the <code>DatePicker</code> - as a string to the <code>value</code> property or as a JavaScript Date object to the <code>dateValue</code> property (only one of these properties should be used at a time): <ul><li>Use the <code>value</code> property if you want to bind the <code>DatePicker</code> to a model using the <code>sap.ui.model.type.Date</code></li> <li>Use the <code>value</code> property if the date is provided as a string from the backend or inside the app (for example, as ABAP type DATS field)</li> <li>Use the <code>dateValue</code> property if the date is already provided as a JavaScript Date object or you want to work with a JavaScript Date object. Use <code>dateValue</code> as a helper property to easily obtain the day, month and year of the chosen date. Although possible to bind it, the recommendation is not to do it. When binding is needed, use <code>value</code> property instead</li></ul> <h3>Formatting</h3> All formatting and parsing of dates from and to strings is done using the {@link sap.ui.core.format.DateFormat}. If a date is entered by typing it into the input field, it must fit to the used date format and locale. Supported format options are pattern-based on Unicode LDML Date Format notation. See {@link http://unicode.org/reports/tr35/#Date_Field_Symbol_Table} For example, if the <code>valueFormat</code> is "yyyy-MM-dd", the <code>displayFormat</code> is "MMM d, y", and the used locale is English, a valid value string is "2015-07-30", which leads to an output of "Jul 30, 2015". If no placeholder is set to the <code>DatePicker</code>, the used <code>displayFormat</code> is displayed as a placeholder. If another placeholder is needed, it must be set. <b>Note:</b> If the string does NOT match the <code>displayFormat</code> (from user input) or the <code>valueFormat</code> (on app level), the {@link sap.ui.core.format.DateFormat} makes an attempt to parse it based on the locale settings. For more information, see the respective documentation in the API Reference. <h3>Responsive behavior</h3> The <code>DatePicker</code> is smaller in compact mode and provides a touch-friendly size in cozy mode. On mobile devices, one tap on the input field opens the <code>DatePicker</code> in full screen. To close the window, the user can select a date (which triggers the close event), or select Cancel. 1.22.0 sap.m/DateTimeField Displays date in this given type in input field. Default value is taken from locale settings. Accepted are values of <code>sap.ui.core.CalendarType</code> or an empty string. If no type is set, the default type of the configuration is used. <b>Note:</b> If data binding on <code>value</code> property with type <code>sap.ui.model.type.Date</code> is used, this property will be ignored. If set, the days in the calendar popup are also displayed in this calendar type If not set, the dates are only displayed in the primary calendar type Minimum date that can be shown and selected in the <code>DatePicker</code>. This must be a JavaScript date object. <b>Note:</b> If the <code>minDate</code> is set to be after the <code>maxDate</code>, the <code>maxDate</code> and the <code>minDate</code> are switched before rendering. Maximum date that can be shown and selected in the <code>DatePicker</code>. This must be a JavaScript date object. <b>Note:</b> If the <code>maxDate</code> is set to be before the <code>minDate</code>, the <code>maxDate</code> and the <code>minDate</code> are switched before rendering. Hides or shows the popover's footer. Fired when navigating in <code>Calendar</code> popup. Date range containing the start and end date displayed in the <code>Calendar</code> popup. Indicates if the event is fired, due to popup being opened. Date Range with type to visualize special days in the Calendar. If one day is assigned to more than one Type, only the first one will be used. To set a single date (instead of a range), set only the startDate property of the sap.ui.unified.DateRange class. <b>Note:</b> Since 1.48 you could set a non-working day via the sap.ui.unified.CalendarDayType.NonWorking enum type just as any other special date type using sap.ui.unified.DateRangeType. Internal aggregation that contains the inner picker pop-up. Association to the <code>CalendarLegend</code> explaining the colors of the <code>specialDates</code>. <b>Note</b> The legend does not have to be rendered but must exist, and all required types must be assigned.