@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-ec448881d

package/src/DatePicker.js

@@ -1,17 +1,11 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
-import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
-import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
-import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
-import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
+import getRoundedTimestamp from "@ui5/webcomponents-localization/dist/dates/getRoundedTimestamp.js";
+import getTodayUTCTimestamp from "@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import {
-	isEnter,
 	isPageUp,
 	isPageDown,
 	isPageUpShift,
@@ -20,17 +14,19 @@ import {
 	isPageDownShiftCtrl,
 	isShow,
 	isF4,
+	isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
-import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler.js";
-import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_ACC_TEXT, INPUT_SUGGESTIONS_TITLE } from "./generated/i18n/i18n-defaults.js";
+import HasPopup from "./types/HasPopup.js";
+import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_DESCRIPTION, INPUT_SUGGESTIONS_TITLE } from "./generated/i18n/i18n-defaults.js";
+import DateComponentBase from "./DateComponentBase.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Calendar from "./Calendar.js";
+import * as CalendarDateComponent from "./CalendarDate.js";
 import Input from "./Input.js";
 import InputType from "./types/InputType.js";
 import DatePickerTemplate from "./generated/templates/DatePickerTemplate.lit.js";
@@ -50,7 +46,6 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
 const metadata = {
 	tag: "ui5-date-picker",
 	altTag: "ui5-datepicker",
-	languageAware: true,
 	managedSlots: true,
 	properties: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
 		/**
@@ -65,7 +60,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the value state of the <code>ui5-date-picker</code>.
+		 * Defines the value state of the component.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
@@ -86,67 +81,10 @@ const metadata = {
 		},
 
 		/**
-		 * Determines the format, displayed in the input field.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		formatPattern: {
-			type: String,
-		},
-
-		/**
-		 * Determines the minimum date available for selection.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @since 1.0.0-rc.6
-		 * @public
-		 */
-		minDate: {
-			type: String,
-		},
-
-		/**
-		 * Determines the maximum date available for selection.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @since 1.0.0-rc.6
-		 * @public
-		 */
-		maxDate: {
-			type: String,
-		},
-
-		/**
-		 * Determines the calendar type.
-		 * The input value is formated according to the calendar type
-		 * and the picker shows the months and years from the specified calendar.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>Gregorian</code></li>
-		 * <li><code>Islamic</code></li>
-		 * <li><code>Japanese</code></li>
-		 * <li><code>Buddhist</code></li>
-		 * <li><code>Persian</code></li>
-		 * </ul>
-		 *
-		 * @type {CalendarType}
-		 * @defaultvalue "Gregorian"
-		 * @public
-		 */
-		primaryCalendarType: {
-			type: CalendarType,
-		},
-
-		/**
-		 * Defines whether the <code>ui5-date-picker</code> is required.
+		 * Defines whether the component is required.
 		 *
 		 * @since 1.0.0-rc.9
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
 		 */
@@ -155,7 +93,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-date-picker</code> is displayed as disabled.
+		 * Determines whether the component is displayed as disabled.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -166,7 +104,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-date-picker</code> is displayed as read-only.
+		 * Determines whether the component is displayed as read-only.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -178,11 +116,11 @@ const metadata = {
 
 		/**
 		 * Defines a short hint, intended to aid the user with data entry when the
-		 * <code>ui5-date-picker</code> has no value.
+		 * component has no value.
 		 *
 		 * <br><br>
 		 * <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
-		 * Passing an empty string as the value of this property will make the <code>ui5-date-picker</code> appear empty - without placeholder or format pattern.
+		 * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
 		 *
 		 * @type {string}
 		 * @defaultvalue undefined
@@ -194,7 +132,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines the name with which the <code>ui5-date-picker</code> will be submitted in an HTML form.
+		 * Determines the name with which the component will be submitted in an HTML form.
 		 *
 		 * <br><br>
 		 * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
@@ -202,7 +140,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> When set, a native <code>input</code> HTML element
-		 * will be created inside the <code>ui5-date-picker</code> so that it can be submitted as
+		 * will be created inside the component so that it can be submitted as
 		 * part of an HTML form. Do not use this property unless you need to submit a form.
 		 *
 		 * @type {string}
@@ -217,7 +155,7 @@ const metadata = {
 		 * Defines the visibility of the week numbers column.
 		 * <br><br>
 		 *
-		 * <b>Note:<b> For calendars other than Gregorian,
+		 * <b>Note:</b> For calendars other than Gregorian,
 		 * the week numbers are not displayed regardless of what is set.
 		 *
 		 * @type {boolean}
@@ -230,26 +168,25 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label attribute for the <code>ui5-date-picker</code>.
+		 * Defines the aria-label attribute for the component.
 		 *
-		 * @type {String}
-		 * @since 1.0.0-rc.9
-		 * @private
-		 * @defaultvalue ""
+		 * @type {string}
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 		},
 
 		/**
-		 * Receives id(or many ids) of the elements that label the <code>ui5-date-picker</code>.
+		 * Receives id(or many ids) of the elements that label the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.9
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabelledby: {
+		accessibleNameRef: {
 			type: String,
 			defaultValue: "",
 		},
@@ -263,20 +200,21 @@ const metadata = {
 			type: Object,
 		},
 
-		_calendar: {
-			type: Object,
+		_calendarCurrentPicker: {
+			type: String,
+			defaultValue: "day",
 		},
 	},
 
 	slots: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
 		/**
-		 * Defines the value state message that will be displayed as pop up under the <code>ui5-date-picker</code>.
+		 * Defines the value state message that will be displayed as pop up under the component.
 		 * <br><br>
 		 *
 		 * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
 		 * <br>
 		 * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
-		 * when the <code>ui5-date-picker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+		 * when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
 		 * @type {HTMLElement}
 		 * @since 1.0.0-rc.7
 		 * @slot
@@ -285,6 +223,17 @@ const metadata = {
 		valueStateMessage: {
 			type: HTMLElement,
 		},
+
+		/**
+		 * The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit,
+		 * when <code>name</code> property is set.
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @private
+		 */
+		formSupport: {
+			type: HTMLElement,
+		},
 	},
 
 	events: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
@@ -293,17 +242,41 @@ const metadata = {
 		 * Fired when the input operation has finished by pressing Enter or on focusout.
 		 *
 		 * @event
+		 * @allowPreventDefault
 		 * @public
+		 * @param {string} value The submitted value.
+		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
-		change: {},
+		change: {
+			details: {
+				value: {
+					type: String,
+				},
+				valid: {
+					type: Boolean,
+				},
+			},
+		},
 
 		/**
-		 * Fired when the value of the <code>ui5-date-picker</code> is changed at each key stroke.
+		 * Fired when the value of the component is changed at each key stroke.
 		 *
 		 * @event
+		 * @allowPreventDefault
 		 * @public
+		 * @param {string} value The submitted value.
+		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
-		input: {},
+		input: {
+			details: {
+				value: {
+					type: String,
+				},
+				valid: {
+					type: Boolean,
+				},
+			},
+		},
 	},
 };
 
@@ -325,7 +298,7 @@ const metadata = {
  * <li>Typing it in directly in the input field</li>
  * </ul>
  * <br><br>
- * When the user makes an entry and chooses the enter key, the calendar shows the corresponding date.
+ * When the user makes an entry and presses the enter key, the calendar shows the corresponding date.
  * When the user directly triggers the calendar display, the actual date is displayed.
  *
  * <h3>Formatting</h3>
@@ -348,8 +321,8 @@ const metadata = {
  * use TAB to reach the buttons for changing month and year.
  * <br>
  *
- * If the <code>ui5-date-picker</code> is focused and the picker dialog is not opened the user can
- * increment or decrement the corresponding field of the JS date object referenced by <code>dateValue</code> propery
+ * If the <code>ui5-date-picker</code> input field is focused and its corresponding picker dialog is not opened,
+ * then users can increment or decrement the date referenced by <code>dateValue</code> property
  * by using the following shortcuts:
  * <br>
  * <ul>
@@ -361,6 +334,29 @@ const metadata = {
  * <li>[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one</li>
  * </ul>
  *
+ * <h3>Calendar types</h3>
+ * The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.
+ * By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,
+ * you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules:
+ * <br><br>
+ *
+ * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";</code>
+ * <br><br>
+ *
+ * Or, you can use the global configuration and set the <code>calendarType</code> key:
+ * <br>
+ * <pre><code>&lt;script data-id="sap-ui-config" type="application/json"&gt;
+ * {
+ *	"calendarType": "Japanese"
+ * }
+ * &lt;/script&gt;</code></pre>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/DatePicker";</code>
@@ -368,19 +364,15 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.DatePicker
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @extends DateComponentBase
  * @tagname ui5-date-picker
  * @public
  */
-class DatePicker extends UI5Element {
+class DatePicker extends DateComponentBase {
 	static get metadata() {
 		return metadata;
 	}
 
-	static get render() {
-		return litRender;
-	}
-
 	static get template() {
 		return DatePickerTemplate;
 	}
@@ -400,93 +392,29 @@ class DatePicker extends UI5Element {
 	constructor() {
 		super();
 
-		this._respPopoverConfig = {
-			allowTargetOverlap: true,
-			stayOpenOnScroll: true,
-			afterClose: () => {
-				this._isPickerOpen = false;
-
-				if (isPhone()) {
-					// close device's keyboard and prevent further typing
-					this.blur();
-				} else if (this._focusInputAfterClose) {
-					this._getInput().focus();
-					this._focusInputAfterClose = false;
-				}
-
-				const calendar = this.calendar;
-				if (calendar) {
-					calendar._hideMonthPicker();
-					calendar._hideYearPicker();
-				}
-			},
-			afterOpen: async () => {
-				await RenderScheduler.whenFinished();
-				const calendar = this.calendar;
-
-				if (!calendar) {
-					return;
-				}
-
-				const dayPicker = calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`);
-				dayPicker._inputLiveChangeTrigger = false;
-				const selectedDay = dayPicker.shadowRoot.querySelector(".ui5-dp-item--selected");
-				const today = dayPicker.shadowRoot.querySelector(".ui5-dp-item--now");
-				let focusableDay = selectedDay || today;
-				if (!selectedDay && (this.minDate || this.maxDate) && !this.isInValidRange((new Date().getTime()))) {
-					focusableDay = this.findFirstFocusableDay(dayPicker);
-				}
-
-				if (this._focusInputAfterOpen) {
-					this._focusInputAfterOpen = false;
-					this._getInput().focus();
-				} else if (focusableDay) {
-					focusableDay.focus();
-
-					let focusableDayIdx = parseInt(focusableDay.getAttribute("data-sap-index"));
-					const focusableItem = dayPicker.focusableDays.find(item => parseInt(item._index) === focusableDayIdx);
-					focusableDayIdx = focusableItem ? dayPicker.focusableDays.indexOf(focusableItem) : focusableDayIdx;
-
-					dayPicker._itemNav.current = focusableDayIdx;
-					dayPicker._itemNav.update();
-				}
-			},
-		};
-
-		this._calendar = {
-			onSelectedDatesChange: this._handleCalendarChange.bind(this),
-			selectedDates: [],
-		};
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this.FormSupport = undefined;
 	}
 
-	findFirstFocusableDay(daypicker) {
-		const today = new Date();
-		if (!this.isInValidRange(today.getTime())) {
-			const focusableItems = Array.from(daypicker.shadowRoot.querySelectorAll(".ui5-dp-item"));
-			return focusableItems.filter(x => !x.classList.contains("ui5-dp-item--disabled"))[0];
+	/**
+	 * @protected
+	 */
+	onResponsivePopoverAfterClose() {
+		this._isPickerOpen = false;
+		if (isPhone()) {
+			this.blur(); // close device's keyboard and prevent further typing
+		} else {
+			this._getInput().focus();
 		}
 	}
 
 	onBeforeRendering() {
-		this._calendar.primaryCalendarType = this._primaryCalendarType;
-		this._calendar.formatPattern = this._formatPattern;
-
-		if (this.minDate && !this.isValid(this.minDate)) {
-			this.minDate = null;
-			console.warn(`In order for the "minDate" property to have effect, you should enter valid date format`); // eslint-disable-line
-		}
+		this.FormSupport = getFeature("FormSupport");
 
-		if (this.maxDate && !this.isValid(this.maxDate)) {
-			this.maxDate = null;
-			console.warn(`In order for the "maxDate" property to have effect, you should enter valid date format`); // eslint-disable-line
-		}
-		if (this._checkValueValidity(this.value) || this.checkRealValueValidity()) {
-			this._changeCalendarSelection();
-		} else {
-			this._calendar.selectedDates = [];
-		}
+		["minDate", "maxDate"].forEach(prop => {
+			if (this[prop] && !this.isValid(this[prop])) {
+				console.warn(`Invalid value for property "${prop}": ${this[prop]} is not compatible with the configured format pattern: "${this._displayFormat}"`); // eslint-disable-line
+			}
+		});
 
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
@@ -495,32 +423,52 @@ class DatePicker extends UI5Element {
 			console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
 		}
 
-		if (this.minDate) {
-			this._calendar.minDate = this.minDate;
-		}
+		this.value = this.normalizeValue(this.value) || this.value;
+		this.liveValue = this.value;
+	}
+
+	/**
+	 * Override in derivatives to change calendar selection mode
+	 * @returns {string}
+	 * @protected
+	 */
+	get _calendarSelectionMode() {
+		return "Single";
+	}
 
-		if (this.maxDate) {
-			this._calendar.maxDate = this.maxDate;
+	/**
+	 * Used to provide a timestamp to the Calendar (to focus it to a relevant date when open) based on the component's state
+	 * Override in derivatives to provide the calendar a timestamp based on their properties
+	 * By default focus the calendar on the selected date if set, or the current day otherwise
+	 * @protected
+	 */
+	get _calendarTimestamp() {
+		if (this.value && this._checkValueValidity(this.value)) {
+			const millisecondsUTC = this.dateValueUTC.getTime();
+			return getRoundedTimestamp(millisecondsUTC);
 		}
+
+		return getTodayUTCTimestamp(this._primaryCalendarType);
 	}
 
-	_getTimeStampFromString(value) {
-		const jsDate = this.getFormat().parse(value);
-		if (jsDate) {
-			return CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType).toUTCJSDate().valueOf();
+	/**
+	 * Used to provide selectedDates to the calendar based on the component's state
+	 * Override in derivatives to provide different rules for setting the calendar's selected dates
+	 * @protected
+	 */
+	get _calendarSelectedDates() {
+		if (this.value && this._checkValueValidity(this.value)) {
+			return [this.value];
 		}
-		return undefined;
+
+		return [];
 	}
 
 	_onkeydown(event) {
 		if (isShow(event)) {
 			event.preventDefault(); // Prevent scroll on Alt/Option + Arrow Up/Down
 			if (this.isOpen()) {
-				if (isF4(event)) {
-					if (this.calendar._monthPicker._hidden) {
-						this.calendar._showYearPicker();
-					}
-				} else {
+				if (!isF4(event)) {
 					this._toggleAndFocusInput();
 				}
 			} else {
@@ -533,107 +481,82 @@ class DatePicker extends UI5Element {
 		}
 
 		if (isEnter(event)) {
-			this._handleEnterPressed();
-		}
-
-		if (isPageUpShiftCtrl(event)) {
+			if (this.FormSupport) {
+				this.FormSupport.triggerFormSubmit(this);
+			}
+		} else if (isPageUpShiftCtrl(event)) {
 			event.preventDefault();
-			this._changeDateValueWrapper(true, true, false, false);
+			this._modifyDateValue(1, "year");
 		} else if (isPageUpShift(event)) {
 			event.preventDefault();
-			this._changeDateValueWrapper(true, false, true, false);
+			this._modifyDateValue(1, "month");
 		} else if (isPageUp(event)) {
 			event.preventDefault();
-			this._changeDateValueWrapper(true, false, false, true);
-		}
-
-		if (isPageDownShiftCtrl(event)) {
+			this._modifyDateValue(1, "day");
+		} else if (isPageDownShiftCtrl(event)) {
 			event.preventDefault();
-			this._changeDateValueWrapper(false, true, false, false);
+			this._modifyDateValue(-1, "year");
 		} else if (isPageDownShift(event)) {
 			event.preventDefault();
-			this._changeDateValueWrapper(false, false, true, false);
+			this._modifyDateValue(-1, "month");
 		} else if (isPageDown(event)) {
 			event.preventDefault();
-			this._changeDateValueWrapper(false, false, false, true);
+			this._modifyDateValue(-1, "day");
 		}
 	}
 
 	/**
-	 * This method is used in the derived classes
-	 */
-	_handleEnterPressed() {}
-
-	/**
-	 * This method is used in the derived classes
-	 */
-	_onfocusout() {}
-
-	/**
-	 * Adds or extracts a given number of measuring units from the "dateValue" property value
-	 * @param {boolean} forward if true indicates addition
-	 * @param {boolean} years indicates that the measuring unit is in years
-	 * @param {boolean} months indicates that the measuring unit is in months
-	 * @param {boolean} days indicates that the measuring unit is in days
-	 * @param {int} step number of measuring units to substract or add defaults to 1
-	 */
-	_changeDateValueWrapper(forward, years, months, days, step = 1) {
-		let date = this.dateValue;
-		date = this._changeDateValue(date, forward, years, months, days, step);
-		this.value = this.formatValue(date);
-	}
-
-	/**
-	 * Adds or extracts a given number of measuring units from the "dateValue" property value
 	 *
-	 * @param {boolean} date js date object to be changed
-	 * @param {boolean} years indicates that the measuring unit is in years
-	 * @param {boolean} months indicates that the measuring unit is in months
-	 * @param {boolean} days indicates that the measuring unit is in days
-	 * @param {boolean} forward if true indicates addition
-	 * @param {int} step number of measuring units to substract or add defaults ot 1
-	 * @returns {Object} JS date object
+	 * @param amount
+	 * @param unit
+	 * @protected
 	 */
-	_changeDateValue(date, forward, years, months, days, step = 1) {
-		if (!date) {
+	_modifyDateValue(amount, unit) {
+		if (!this.dateValue) {
 			return;
 		}
 
-		let calDate = CalendarDate.fromLocalJSDate(date, this._primaryCalendarType);
-		const oldCalDate = new CalendarDate(calDate, this._primaryCalendarType);
-		const incrementStep = forward ? step : -step;
+		const modifiedDate = modifyDateBy(CalendarDate.fromLocalJSDate(this.dateValue), amount, unit, this._minDate, this._maxDate);
+		const newValue = this.formatValue(modifiedDate.toUTCJSDate());
+		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
+	}
+
+	_updateValueAndFireEvents(value, normalizeValue, events, updateValue = true) {
+		const valid = this._checkValueValidity(value);
 
-		if (incrementStep === 0 || (!days && !months && !years)) {
-			return;
+		if (valid && normalizeValue) {
+			value = this.normalizeValue(value); // transform valid values (in any format) to the correct format
 		}
 
-		if (days) {
-			calDate.setDate(calDate.getDate() + incrementStep);
-		} else if (months) {
-			calDate.setMonth(calDate.getMonth() + incrementStep);
-			const monthDiff = (calDate.getYear() - oldCalDate.getYear()) * 12 + (calDate.getMonth() - oldCalDate.getMonth());
+		let executeEvent = true;
+		this.liveValue = value;
 
-			if (calDate.getMonth() === oldCalDate.getMonth() || monthDiff !== incrementStep) {
-				// first condition example: 31th of March increment month with -1 results in 2th of March
-				// second condition example: 31th of January increment month with +1 results in 2th of March
-				calDate.setDate(0);
+		events.forEach(event => {
+			if (!this.fireEvent(event, { value, valid }, true)) {
+				executeEvent = false;
 			}
-		} else if (years) {
-			calDate.setYear(calDate.getYear() + incrementStep);
+		});
 
-			if (calDate.getMonth() !== oldCalDate.getMonth()) {
-				// day doesn't exist in this month (February 29th)
-				calDate.setDate(0);
-			}
+		if (!executeEvent) {
+			return;
 		}
 
-		if (calDate.valueOf() < this._minDate) {
-			calDate = CalendarDate.fromTimestamp(this._minDate, this._primaryCalendarType);
-		} else if (calDate.valueOf() > this._maxDate) {
-			calDate = CalendarDate.fromTimestamp(this._maxDate, this._primaryCalendarType);
+		if (updateValue) {
+			this._getInput().getInputDOMRef().then(innnerInput => {
+				innnerInput.value = value;
+			});
+			this.value = value;
+			this._updateValueState(); // Change the value state to Error/None, but only if needed
 		}
+	}
 
-		return calDate.toLocalJSDate();
+	_updateValueState() {
+		const isValid = this._checkValueValidity(this.value);
+		if (!isValid) { // If not valid - always set Error regardless of the current value state
+			this.valueState = ValueState.Error;
+		} else if (isValid && this.valueState === ValueState.Error) { // However if valid, change only Error (but not the others) to None
+			this.valueState = ValueState.None;
+		}
 	}
 
 	_toggleAndFocusInput() {
@@ -645,57 +568,41 @@ class DatePicker extends UI5Element {
 		return this.shadowRoot.querySelector("[ui5-input]");
 	}
 
-	async _handleInputChange() {
-		let nextValue = await this._getInput().getInputValue();
-		const emptyValue = nextValue === "";
-		const isValid = emptyValue || this._checkValueValidity(nextValue);
-
-		if (isValid) {
-			nextValue = this.normalizeValue(nextValue);
-			this.valueState = ValueState.None;
-		} else {
-			this.valueState = ValueState.Error;
-		}
-
-
-		this.value = nextValue;
-		this.fireEvent("change", { value: nextValue, valid: isValid });
-		// Angular two way data binding
-		this.fireEvent("value-changed", { value: nextValue, valid: isValid });
-	}
-
-	async _handleInputLiveChange() {
-		const nextValue = await this._getInput().getInputValue();
-		const emptyValue = nextValue === "";
-		const isValid = emptyValue || this._checkValueValidity(nextValue);
-
-		if (this.responsivePopover) {
-			const calendar = this.calendar;
-			const dayPicker = calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`);
-			// If day picker component rerendering is triggered due to a change in the date picker component input filed,
-			// then mark this trigger and avoid moving the focus from the date picker input field throughout the on after
-			// rendering hook of the day picker component
-			dayPicker._inputLiveChangeTrigger = true;
-		}
+	/**
+	 * The ui5-input "submit" event handler - fire change event when the user presses enter
+	 * @protected
+	 */
+	_onInputSubmit(event) {}
 
-		this.value = nextValue;
-		this.fireEvent("input", { value: nextValue, valid: isValid });
+	/**
+	 * The ui5-input "change" event handler - fire change event when the user focuses out of the input
+	 * @protected
+	 */
+	_onInputChange(event) {
+		this._updateValueAndFireEvents(event.target.value, true, ["change", "value-changed"]);
 	}
 
-	_checkValueValidity(value) {
-		return this.isValid(value) && this.isInValidRange(this._getTimeStampFromString(value));
+	/**
+	 * The ui5-input "input" event handler - fire input even when the user types
+	 * @protected
+	 */
+	async _onInputInput(event) {
+		this._updateValueAndFireEvents(event.target.value, false, ["input"], false);
 	}
 
 	/**
-	 * This method is used in the derived classes
+	 * @protected
 	 */
-	checkRealValueValidity() {
-		return false;
+	_checkValueValidity(value) {
+		if (value === "") {
+			return true;
+		}
+		return this.isValid(value) && this.isInValidRange(value);
 	}
 
 	_click(event) {
 		if (isPhone()) {
-			this.responsivePopover.open(this);
+			this.responsivePopover.showAt(this);
 			event.preventDefault(); // prevent immediate selection of any item
 		}
 	}
@@ -703,15 +610,21 @@ class DatePicker extends UI5Element {
 	/**
 	 * Checks if a value is valid against the current date format of the DatePicker.
 	 * @param {string} value A value to be tested against the current date format
+	 * @returns {boolean}
 	 * @public
 	 */
 	isValid(value = "") {
-		return !!(value && this.getFormat().parse(value));
+		if (value === "") {
+			return true;
+		}
+
+		return !!this.getFormat().parse(value);
 	}
 
 	/**
-	 * Checks if a date is in range between minimum and maximum date.
-	 * @param {object} value
+	 * Checks if a date is between the minimum and maximum date.
+	 * @param {string} value A value to be checked
+	 * @returns {boolean}
 	 * @public
 	 */
 	isInValidRange(value = "") {
@@ -719,82 +632,35 @@ class DatePicker extends UI5Element {
 			return true;
 		}
 
-		const pickedDate = new Date(value),
-			minDate = new Date(this._minDate),
-			maxDate = new Date(this._maxDate);
-
-		if (minDate && maxDate) {
-			if (minDate <= pickedDate && maxDate >= pickedDate) {
-				return true;
-			}
-		} else if (minDate && !maxDate) {
-			if (minDate <= pickedDate) {
-				return true;
-			}
-		} else if (maxDate && !minDate) {
-			if (maxDate >= pickedDate) {
-				return true;
-			}
-		} else if (!maxDate && !minDate) {
-			return true;
-		}
-
-		return false;
+		const calendarDate = this._getCalendarDateFromString(value);
+		return calendarDate.valueOf() >= this._minDate.valueOf() && calendarDate.valueOf() <= this._maxDate.valueOf();
 	}
 
-	// because the parser understands more than one format
-	// but we need values in one format
+	/**
+	 * The parser understands many formats, but we need one format
+	 * @protected
+	 */
 	normalizeValue(value) {
 		if (value === "") {
 			return value;
 		}
 
-		return this.getFormat().format(this.getFormat().parse(value));
-	}
-
-	get validValue() {
-		if (this.isValid(this.value)) {
-			return this.value;
-		}
-		return this.getFormat().format(new Date());
-	}
-
-	get calendar() {
-		return this.responsivePopover.querySelector(`#${this._id}-calendar`);
-	}
-
-	get _calendarDate() {
-		const millisecondsUTC = this.getFormat().parse(this.validValue, true).getTime();
-		const oCalDate = CalendarDate.fromTimestamp(
-			millisecondsUTC - (millisecondsUTC % (24 * 60 * 60 * 1000)),
-			this._primaryCalendarType
-		);
-		return oCalDate;
-	}
-
-	get _primaryCalendarType() {
-		const localeData = getCachedLocaleDataInstance(getLocale());
-		return this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();
-	}
-
-	get _formatPattern() {
-		return this.formatPattern || "medium"; // get from config
-	}
-
-	get _isPattern() {
-		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
+		return this.getFormat().format(this.getFormat().parse(value, true), true); // it is important to both parse and format the date as UTC
 	}
 
 	get _displayFormat() {
 		return this.getFormat().oFormatOptions.pattern;
 	}
 
+	/**
+	 * @protected
+	 */
 	get _placeholder() {
 		return this.placeholder !== undefined ? this.placeholder : this._displayFormat;
 	}
 
 	get _headerTitleText() {
-		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return DatePicker.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get phone() {
@@ -813,64 +679,18 @@ class DatePicker extends UI5Element {
 		return isIE();
 	}
 
-	getFormat() {
-		if (this._isPattern) {
-			this._oDateFormat = DateFormat.getInstance({
-				pattern: this._formatPattern,
-				calendarType: this._primaryCalendarType,
-			});
-		} else {
-			this._oDateFormat = DateFormat.getInstance({
-				style: this._formatPattern,
-				calendarType: this._primaryCalendarType,
-			});
-		}
-		return this._oDateFormat;
-	}
-
 	get accInfo() {
 		return {
-			"ariaDescribedBy": `${this._id}-date`,
-			"ariaHasPopup": "true",
+			"ariaRoledescription": this.dateAriaDescription,
+			"ariaHasPopup": HasPopup.Grid,
 			"ariaAutoComplete": "none",
-			"role": "combobox",
-			"ariaOwns": `${this._id}-responsive-popover`,
-			"ariaExpanded": this.isOpen(),
-			"ariaDescription": this.dateAriaDescription,
 			"ariaRequired": this.required,
 			"ariaLabel": getEffectiveAriaLabelText(this),
 		};
 	}
 
-	get _maxDate() {
-		return this.maxDate ? this._getTimeStampFromString(this.maxDate) : this._getMaxCalendarDate();
-	}
-
-	get _minDate() {
-		return this.minDate ? this._getTimeStampFromString(this.minDate) : this._getMinCalendarDate();
-	}
-
-	_getMinCalendarDate() {
-		const minDate = new CalendarDate(1, 0, 1, this._primaryCalendarType);
-		minDate.setYear(1);
-		minDate.setMonth(0);
-		minDate.setDate(1);
-		return minDate.valueOf();
-	}
-
-	_getMaxCalendarDate() {
-		const maxDate = new CalendarDate(1, 0, 1, this._primaryCalendarType);
-		maxDate.setYear(9999);
-		maxDate.setMonth(11);
-		const tempDate = new CalendarDate(maxDate, this._primaryCalendarType);
-		tempDate.setDate(1);
-		tempDate.setMonth(tempDate.getMonth() + 1, 0);
-		maxDate.setDate(tempDate.getDate());// 31st for Gregorian Calendar
-		return maxDate.valueOf();
-	}
-
 	get openIconTitle() {
-		return this.i18nBundle.getText(DATEPICKER_OPEN_ICON_TITLE);
+		return DatePicker.i18nBundle.getText(DATEPICKER_OPEN_ICON_TITLE);
 	}
 
 	get openIconName() {
@@ -878,7 +698,7 @@ class DatePicker extends UI5Element {
 	}
 
 	get dateAriaDescription() {
-		return this.i18nBundle.getText(DATEPICKER_DATE_ACC_TEXT);
+		return DatePicker.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);
 	}
 
 	/**
@@ -898,59 +718,42 @@ class DatePicker extends UI5Element {
 		return !this.disabled && !this.readonly;
 	}
 
-	_handleCalendarChange(event) {
-		const iNewValue = event.detail.dates && event.detail.dates[0];
-
-		if (this._calendar.selectedDates.indexOf(iNewValue) !== -1) {
-			this.closePicker();
-			return false;
-		}
-
-		const fireChange = this._handleCalendarSelectedDatesChange(event, iNewValue);
-
-		if (fireChange) {
-			this.fireEvent("change", { value: this.value, valid: true });
-			// Angular two way data binding
-			this.fireEvent("value-changed", { value: this.value, valid: true });
-		}
+	/**
+	 * The user selected a new date in the calendar
+	 * @param event
+	 * @protected
+	 */
+	onSelectedDatesChange(event) {
+		event.preventDefault();
+		const newValue = event.detail.values && event.detail.values[0];
+		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
 
 		this.closePicker();
 	}
 
-	_handleCalendarSelectedDatesChange(event, newValue) {
-		this._updateValueCalendarSelectedDatesChange(newValue);
-
-		this._calendar.timestamp = newValue;
-		this._calendar.selectedDates = event.detail.dates;
-		this._focusInputAfterClose = true;
-
-		if (this.isInValidRange(this._getTimeStampFromString(this.value))) {
-			this.valueState = ValueState.None;
-		} else {
-			this.valueState = ValueState.Error;
-		}
-
-		return true;
+	/**
+	 * The user clicked the "month" button in the header
+	 */
+	onHeaderShowMonthPress() {
+		this._calendarCurrentPicker = "month";
 	}
 
-	_updateValueCalendarSelectedDatesChange(newValue) {
-		this.value = this.getFormat().format(
-			new Date(CalendarDate.fromTimestamp(
-				newValue * 1000,
-				this._primaryCalendarType
-			).valueOf()),
-			true
-		);
+	/**
+	 * The user clicked the "year" button in the header
+	 */
+	onHeaderShowYearPress() {
+		this._calendarCurrentPicker = "year";
 	}
 
 	/**
 	 * Formats a Java Script date object into a string representing a locale date
 	 * according to the <code>formatPattern</code> property of the DatePicker instance
-	 * @param {object} oDate A Java Script date object to be formatted as string
+	 * @param {object} date A Java Script date object to be formatted as string
+	 * @returns {string} The date as string
 	 * @public
 	 */
-	formatValue(oDate) {
-		return this.getFormat().format(oDate);
+	formatValue(date) {
+		return this.getFormat().format(date);
 	}
 
 	/**
@@ -963,21 +766,16 @@ class DatePicker extends UI5Element {
 
 	/**
 	 * Opens the picker.
-	 * @param {object} options A JSON object with additional configuration.<br>
-	 * <code>{ focusInput: true }</code> By default, the focus goes in the picker after opening it.
-	 * Specify this option to focus the input field.
 	 * @public
+	 * @async
+	 * @returns {Promise} Resolves when the picker is open
 	 */
-	async openPicker(options) {
+	async openPicker() {
 		this._isPickerOpen = true;
+		this._calendarCurrentPicker = "day";
 		this.responsivePopover = await this._respPopover();
-		this._changeCalendarSelection();
 
-		if (options && options.focusInput) {
-			this._focusInputAfterOpen = true;
-		}
-
-		this.responsivePopover.open(this);
+		this.responsivePopover.showAt(this);
 	}
 
 	togglePicker() {
@@ -988,25 +786,9 @@ class DatePicker extends UI5Element {
 		}
 	}
 
-	_changeCalendarSelection(focusTimestamp) {
-		if (this._calendarDate.getYear() < 1) {
-			// 0 is a valid year, but we cannot display it
-			return;
-		}
-
-		const oCalDate = this._calendarDate;
-		const timestamp = focusTimestamp || oCalDate.valueOf() / 1000;
-
-		this._calendar = Object.assign({}, this._calendar);
-		this._calendar.timestamp = timestamp;
-		if (this.value) {
-			this._calendar.selectedDates = [timestamp];
-		}
-	}
-
 	/**
 	 * Checks if the picker is open.
-	 * @returns {Boolean} true if the picker is open, false otherwise
+	 * @returns {boolean} true if the picker is open, false otherwise
 	 * @public
 	 */
 	isOpen() {
@@ -1014,30 +796,18 @@ class DatePicker extends UI5Element {
 	}
 
 	/**
-	 * Gets some semantic details about an event originated in the control.
-	 * @param {*} event An event object
-	 * @returns {Object} Semantic details
-	 */
-	getSemanticTargetInfo(event) {
-		const oDomTarget = getDomTarget(event);
-		let isInput = false;
-
-		if (oDomTarget && oDomTarget.className.indexOf("ui5-input-inner") > -1) {
-			isInput = true;
-		}
-
-		return { isInput };
-	}
-
-	/**
-	 * Currently selected date represented as JavaScript Date instance.
+	 * Currently selected date represented as a Local JavaScript Date instance.
 	 *
 	 * @readonly
 	 * @type { Date }
 	 * @public
 	 */
 	get dateValue() {
-		return this.getFormat().parse(this.value);
+		return this.liveValue ? this.getFormat().parse(this.liveValue) : this.getFormat().parse(this.value);
+	}
+
+	get dateValueUTC() {
+		return this.liveValue ? this.getFormat().parse(this.liveValue, true) : this.getFormat().parse(this.value);
 	}
 
 	get styles() {
@@ -1057,34 +827,13 @@ class DatePicker extends UI5Element {
 			Icon,
 			ResponsivePopover,
 			Calendar,
+			CalendarDateComponent.default,
 			Input,
 			Button,
 		];
 	}
-
-	static async onDefine() {
-		await Promise.all([
-			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
-			fetchI18nBundle("@ui5/webcomponents"),
-		]);
-	}
 }
 
-const getDomTarget = event => {
-	let target,
-		composedPath;
-
-	if (typeof event.composedPath === "function") {
-		composedPath = event.composedPath();
-	}
-
-	if (Array.isArray(composedPath) && composedPath.length) {
-		target = composedPath[0];
-	}
-
-	return target;
-};
-
 DatePicker.define();
 
 export default DatePicker;