DateRangeSelection A single-field input control that enables the users to enter a localized date range (between 0001-01-01 and 9999-12-31). <h3>Overview</h3> The <code>DateRangeSelection</code> enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar. They can also navigate directly from one month or year to another. <b>Note:</b> The control is not UTC aware and the selected date range starts from 00:00:00:000 of the first date and ends in 23:59:59:999 on the second date. The {@link sap.ui.unified.Calendar} is used internally only if the <code>DateRangeSelection</code> is opened (not used for the initial rendering). If the <code>sap.ui.unified</code> library is not loaded before the <code>DateRangeSelection</code> is opened, it will be loaded upon opening. This could lead to a waiting time when the <code>DateRangeSelection</code> is opened for the first time. To prevent this, apps using the <code>DateRangeSelection</code> should also load the <code>sap.ui.unified</code> library. <h3>Usage</h3> <i>When to use?</i> If you need a date range and know that your user is a power user who has to input lots of data. If the keyboard is the primary device used for navigating the app, use two input fields. This allows the user to quickly jump from field to field. By selecting a date in one of the fields, the other field should recognize the information and jump to the same selection. <i>When not to use?</i> If the user's primary goal is not to select ranges or if you just want to enter a date and a time. For such cases, use the {@link sap.m.DatePicker} or {@link sap.m.TimePicker}. 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 (not available for mobile devices)</li></ul> On app level, there are two options to provide a date for the <code>DateRangeSelection</code> - date range as a string to the <code>value</code> property or JavaScript Date objects to the <code>dateValue</code> and <code>secondDateValue</code> properties (only one of these options should be used at a time): <ul><li>Use the <code>value</code> property if the date range is already provided as a formatted string</li> <li>Use the <code>dateValue</code> and <code>secondDateValue</code> properties if the date range is already provided as JavaScript Date objects or you want to work with JavaScript Date objects</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>displayFormat</code> is "MMM d, y", delimiter is "-", and the used locale is English, a valid value string is "Jul 29, 2015 - Jul 31, 2015" and it is displayed in the same way in the input field. If no placeholder is set to the <code>DateRangeSelection</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>DateRangeSelection</code> is fully responsive. It is smaller in compact mode and provides a touch-friendly size in cozy mode. 1.22.0 sap.m/DatePicker Delimiter between start and end date. Default value is "-". If no delimiter is given, the one defined for the used locale is used. The end date of the range as JavaScript Date object. This is independent from any formatter. <b>Note:</b> If this property is used, the <code>value</code> property should not be changed from the caller. Start date of the range. replaced by <code>dateValue</code> property of the {@link sap.m.DateTimeField} End date of the range. replaced by <code>secondDateValue</code> property