@ui5/webcomponents 0.0.0-aeb93167c → 0.0.0-b053ad005

package/dist/DateRangePicker.js

@@ -1,9 +1,8 @@
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
-import DateRangePickerTemplate from "./generated/templates/DateRangePickerTemplate.lit.js";
-import RenderScheduler from "../../base/src/RenderScheduler.js";
+import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
+import getTodayUTCTimestamp from "@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js";
+import { DATERANGE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import DateRangePickerCss from "./generated/themes/DateRangePicker.css.js";
@@ -17,38 +16,24 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.DateRangePicker.prototype */ {
 		/**
 		 * Determines the symbol which separates the dates.
+		 * If not supplied, the default time interval delimiter for the current locale will be used.
 		 *
 		 * @type {string}
-		 * @defaultvalue "-"
 		 * @public
 		 */
 		delimiter: {
 			type: String,
 			defaultValue: "-",
 		},
+
 		/**
-		 * Defines the UNIX timestamp of the first date - seconds since 00:00:00 UTC on Jan 1, 1970.
-		 * @type {number}
-		 * @private
-		*/
-		_firstDateTimestamp: {
-			type: Integer,
-		},
-		/**
-		 * Defines the UNIX timestamp of the second date- seconds since 00:00:00 UTC on Jan 1, 1970.
-		 * @type {number}
+		 * The first date in the range during selection (this is a temporary value, not the first date in the value range)
 		 * @private
-		*/
-		_lastDateTimestamp: {
-			type: Integer,
+		 */
+		_tempValue: {
+			type: String,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.DateRangePicker.prototype */ {
-		//
-	},
-	events: /** @lends sap.ui.webcomponents.main.DateRangePicker.prototype */ {
-		//
-	},
 };
 
 /**
@@ -63,17 +48,15 @@ const metadata = {
  * For the <code>ui5-daterange-picker</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/DateRangePicker.js";</code>
+ * <code>import "@ui5/webcomponents/dist/DateRangePicker.js";</code>
  *
  * <h3>Keyboard Handling</h3>
  * The <code>ui5-daterange-picker</code> provides advanced keyboard handling.
  * <br>
  *
  * When the <code>ui5-daterange-picker</code> input field is focused the user can
- * increment or decrement the corresponding field of the JS date object referenced by <code>_firstDateTimestamp</code> propery
- * if the caret symbol is before the delimiter character or <code>_lastDateTimestamp</code> property if the caret symbol is
- * after the delimiter character.
- * The following shortcuts are enabled:
+ * increment or decrement respectively the range start or end date, depending on where the cursor is.
+ * The following shortcuts are available:
  * <br>
  * <ul>
  * <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li>
@@ -97,493 +80,246 @@ class DateRangePicker extends DatePicker {
 		return metadata;
 	}
 
-	static get render() {
-		return litRender;
-	}
-
 	static get styles() {
 		return [DatePicker.styles, DateRangePickerCss];
 	}
 
-	static get template() {
-		return DateRangePickerTemplate;
-	}
-
-	constructor() {
-		super();
-		this.isFirstDatePick = true;
-		this._initialRendering = true;
-		this._oneTimeStampSelected = false; // Used to determine whether the first & last date is the same
-		this._dayPickerMouseoverHandler = this._itemMouseoverHandler.bind(this);
-		this._respPopoverConfig.beforeOpen = this.handleBeforeOpen;
-		this._respPopoverConfig.beforeClose = this.handleBeforeClose;
-	}
-
-	async onAfterRendering() {
-		const daypicker = this.getDayPicker();
-		this._cleanHoveredAttributeFromVisibleItems(daypicker);
-		this._initialRendering = false;
+	get _startDateTimestamp() {
+		return this._extractFirstTimestamp(this.value);
 	}
 
-	async handleBeforeOpen() {
-		const daypicker = await this.getDayPicker();
-		daypicker.addEventListener("item-mouseover", this._dayPickerMouseoverHandler);
-		daypicker.addEventListener("daypickerrendered", this._keyboardNavigationHandler);
+	get _endDateTimestamp() {
+		return this._extractLastTimestamp(this.value);
 	}
 
-	async handleBeforeClose() {
-		const daypicker = await this.getDayPicker();
-		daypicker.removeEventListener("item-mouseover", this._dayPickerMouseoverHandler);
-		daypicker.removeEventListener("daypickerrendered", this._keyboardNavigationHandler);
+	get _tempTimestamp() {
+		return this._tempValue && this.getFormat().parse(this._tempValue, true).getTime() / 1000;
 	}
 
-	_itemMouseoverHandler(event) {
-		if (this._oneTimeStampSelected) {
-			return;
-		}
-
-		const dayItems = event.target.shadowRoot.querySelectorAll(".ui5-dp-item");
-		const firstDateTimestamp = event.target._selectedDates[0];
-		const lastDateTimestamp = event.detail.target.parentElement.dataset.sapTimestamp;
-
-		for (let i = 0; i < dayItems.length; i++) {
-			if ((dayItems[i].dataset.sapTimestamp < firstDateTimestamp && dayItems[i].dataset.sapTimestamp > lastDateTimestamp)
-				|| (dayItems[i].dataset.sapTimestamp > firstDateTimestamp && dayItems[i].dataset.sapTimestamp < lastDateTimestamp)) {
-				dayItems[i].setAttribute("hovered", "");
-			} else {
-				dayItems[i].removeAttribute("hovered");
-			}
-		}
-	}
-
-	_keyboardNavigationHandler(event) {
-		if (!event.detail.focusedItemIndex) {
-			return;
-		}
-
-		const dayItems = event.target.shadowRoot.querySelectorAll(".ui5-dp-item");
-		const firstDateTimestamp = this._selectedDates[0];
-		const lastDateTimestamp = dayItems[event.detail.focusedItemIndex].dataset.sapTimestamp;
-
-		for (let i = 0; i < dayItems.length; i++) {
-			if ((dayItems[i].dataset.sapTimestamp < firstDateTimestamp && dayItems[i].dataset.sapTimestamp > lastDateTimestamp)
-				|| (dayItems[i].dataset.sapTimestamp > firstDateTimestamp && dayItems[i].dataset.sapTimestamp < lastDateTimestamp)) {
-				dayItems[i].setAttribute("hovered", "");
-			} else {
-				dayItems[i].removeAttribute("hovered");
-			}
-		}
-	}
-
-	_splitValueByDelimiter(value) {
-		let returnValue = [];
-
-		if (!value) {
-			return ["", ""];
-		}
-
-		if (this.delimiter) {
-			returnValue = String(value).split(this.delimiter);
-		}
-
-		return returnValue;
+	/**
+	 * Required by DatePicker.js
+	 * @override
+	 */
+	get _calendarSelectionMode() {
+		return "Range";
 	}
 
-	_setValue(value) {
-		const emptyValue = value === "",
-			isValid = emptyValue || this._checkValueValidity(value);
-		let dates = [undefined, undefined];
-
-		if (value === this._prevValue) {
-			return this;
-		}
-
-		if (!value) {
-			this.value = "";
-			return;
-		}
-
-		dates = this._splitValueByDelimiter(value);
-		if (!isValid) {
-			this.valueState = ValueState.Error;
-			console.warn("Value can not be converted to a valid dates", this); // eslint-disable-line
-			return;
-		}
-		this.valueState = ValueState.None;
-
-		const firstDate = this.getFormat().parse(dates[0]);
-		const secondDate = this.getFormat().parse(dates[1]);
-
-		this._firstDateTimestamp = Date.UTC(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate(), firstDate.getHours()) / 1000;
-		this._lastDateTimestamp = Date.UTC(secondDate.getFullYear(), secondDate.getMonth(), secondDate.getDate(), secondDate.getHours()) / 1000;
-
-		if (this._firstDateTimestamp > this._lastDateTimestamp) {
-			const temp = this._firstDateTimestamp;
-			this._firstDateTimestamp = this._lastDateTimestamp;
-			this._lastDateTimestamp = temp;
-		}
-
-		this._calendar.selectedDates = this.dateIntervalArrayBuilder(this._firstDateTimestamp * 1000, this._lastDateTimestamp * 1000);
-
-		this.value = this._formatValue(firstDate.valueOf() / 1000, secondDate.valueOf() / 1000);
-		this.realValue = this.value;
-		this._prevValue = this.realValue;
+	/**
+	 * Required by DatePicker.js - set the calendar focus on the first selected date (or today if not set)
+	 * @override
+	 */
+	get _calendarTimestamp() {
+		return this._tempTimestamp || this._startDateTimestamp || getTodayUTCTimestamp(this._primaryCalendarType);
 	}
 
-	_changeCalendarSelection(focusTimestamp) {
-		if (this._calendarDate.getYear() < 1) {
-			// 0 is a valid year, but we cannot display it
-			return;
-		}
-
-		const oCalDate = this._calendarDate,
-			timestamp = focusTimestamp || oCalDate.valueOf() / 1000,
-			dates = this._splitValueByDelimiter(this.realValue);
-
-		if (this._initialRendering) {
-			this._oneTimeStampSelected = dates[0].trim() === dates[1].trim();
-			this._setValue(this.realValue);
+	/**
+	 * Required by DatePicker.js
+	 * @override
+	 */
+	get _calendarSelectedDates() {
+		if (this._tempValue) {
+			return [this._tempValue];
 		}
-
-		this._calendar = Object.assign({}, this._calendar);
-		this._calendar.timestamp = timestamp;
-		if (this.realValue && this._checkValueValidity(this.realValue)) {
-			this._calendar.selectedDates = this.dateIntervalArrayBuilder(this._getTimeStampFromString(dates[0]), this._getTimeStampFromString(dates[1]));
+		if (this.value && this._checkValueValidity(this.value)) {
+			return this._splitValueByDelimiter(this.value);
 		}
-	}
-
-	get _calendarDate() {
-		const dates = this._splitValueByDelimiter(this.realValue),
-			value = this._checkValueValidity(this.realValue) ? dates[0] : this.getFormat().format(new Date()),
-			millisecondsUTCFirstDate = value ? this.getFormat().parse(value, true).getTime() : this.getFormat().parse(this.validValue, true).getTime(),
-			oCalDateFirst = CalendarDate.fromTimestamp(
-				millisecondsUTCFirstDate - (millisecondsUTCFirstDate % (24 * 60 * 60 * 1000)),
-				this._primaryCalendarType
-			);
-
-		return oCalDateFirst;
-	}
-
-	get _shoudHideValueInInput() {
-		return this._firstDateTimestamp === this._lastDateTimestamp && this._firstDateTimestamp;
+		return [];
 	}
 
 	/**
-	 * Currently selected first date represented as JavaScript Date instance.
+	 * Returns the start date of the currently selected range as JavaScript Date instance.
 	 *
 	 * @readonly
 	 * @type { Date }
 	 * @public
 	 */
-	get firstDateValue() {
-		const dateValue = new Date(this._firstDateTimestamp * 1000);
-		return new Date(dateValue.getUTCFullYear(), dateValue.getUTCMonth(), dateValue.getUTCDate(), dateValue.getUTCHours());
+	get startDateValue() {
+		return CalendarDate.fromTimestamp(this._startDateTimestamp * 1000).toLocalJSDate();
 	}
 
 	/**
-	 * Currently selected last date represented as JavaScript Date instance.
+	 * Returns the end date of the currently selected range as JavaScript Date instance.
 	 *
 	 * @readonly
 	 * @type { Date }
 	 * @public
 	 */
-	get lastDateValue() {
-		const dateValue = new Date(this._lastDateTimestamp * 1000);
-		return new Date(dateValue.getUTCFullYear(), dateValue.getUTCMonth(), dateValue.getUTCDate(), dateValue.getUTCHours());
+	get endDateValue() {
+		return CalendarDate.fromTimestamp(this._endDateTimestamp * 1000).toLocalJSDate();
 	}
 
+	/**
+	 * @override
+	 */
 	get _placeholder() {
-		return this.placeholder !== undefined ? this.placeholder : this._displayFormat.concat(" ", this.delimiter, " ", this._displayFormat);
+		return this.placeholder !== undefined ? this.placeholder : `${this._displayFormat} ${this._effectiveDelimiter} ${this._displayFormat}`;
 	}
 
-	async getDayPicker() {
-		this.responsivePopover = await this._respPopover();
-		const calendar = this.responsivePopover.querySelector(`#${this._id}-calendar`);
-		return calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`);
+	get dateAriaDescription() {
+		return DateRangePicker.i18nBundle.getText(DATERANGE_DESCRIPTION);
 	}
 
-	async _handleInputChange() {
-		const nextValue = await this._getInput().getInputValue();
-		const emptyValue = nextValue === "";
-		const isValid = emptyValue || this._checkValueValidity(nextValue);
-		const dates = this._splitValueByDelimiter(nextValue);
-
-		if (dates.length === 2) {
-			this._oneTimeStampSelected = dates[0].trim() === dates[1].trim();
-		}
-
-		if (isValid) {
-			this._setValue(nextValue);
-			this.valueState = ValueState.None;
-		} else {
-			this.valueState = ValueState.Error;
-		}
-
-		this.fireEvent("change", { value: nextValue, valid: isValid });
-		// Angular two way data binding
-		this.fireEvent("value-changed", { value: nextValue, valid: isValid });
-	}
-
-	_checkValueValidity(value) {
-		return this.isValid(value) && this.isInValidRange(value);
+	/**
+	 * @override
+	 */
+	async _onInputSubmit(event) {
+		const input = this._getInput();
+		const caretPos = input.getCaretPosition();
+		await renderFinished();
+		input.setCaretPosition(caretPos); // Return the caret on the previous position after rendering
 	}
 
-	checkRealValueValidity() {
-		return this.isValid(this.realValue) && this.isInValidRange(this.realValue);
+	/**
+	 * @override
+	 */
+	 onResponsivePopoverAfterClose() {
+		this._tempValue = ""; // reset _tempValue on popover close
+		super.onResponsivePopoverAfterClose();
 	}
 
+	/**
+	 * @override
+	 */
 	isValid(value) {
-		const dateStrings = this._splitValueByDelimiter(value, this.delimiter),
-			isFirstDateValid = super.isValid(dateStrings[0]),
-			isLastDateValid = super.isValid(dateStrings[1]);
-
-		if (!dateStrings[1]) {
-			return isFirstDateValid;
-		}
-
-		return isFirstDateValid && isLastDateValid;
+		const parts = this._splitValueByDelimiter(value);
+		return parts.length <= 2 && parts.every(dateString => super.isValid(dateString)); // must be at most 2 dates and each must be valid
 	}
 
+	/**
+	 * @override
+	 */
 	isInValidRange(value) {
-		const dateStrings = this._splitValueByDelimiter(value, this.delimiter),
-			isFirstDateInValidRange = super.isInValidRange(this._getTimeStampFromString(dateStrings[0])),
-			isLastDateInValidRange = super.isInValidRange(this._getTimeStampFromString(dateStrings[1]));
-
-		if (!dateStrings[1]) {
-			return isFirstDateInValidRange;
-		}
-
-		return isFirstDateInValidRange && isLastDateInValidRange;
-	}
-
-	dateIntervalArrayBuilder(firstTimestamp, lastTimestamp) {
-		const datesTimestamps = [],
-			tempCalendarDate = CalendarDate.fromTimestamp(firstTimestamp);
-
-		while (tempCalendarDate.valueOf() < lastTimestamp) {
-			datesTimestamps.push(tempCalendarDate.valueOf() / 1000);
-			tempCalendarDate.setDate(tempCalendarDate.getDate() + 1);
-		}
-
-		datesTimestamps.push(tempCalendarDate.valueOf() / 1000);
-
-		return datesTimestamps;
-	}
-
-	_handleCalendarChange(event) {
-		const newValue = event.detail.dates && event.detail.dates[0];
-		this._oneTimeStampSelected = false;
-		if (this.isFirstDatePick) {
-			this.isFirstDatePick = false;
-			this._firstDateTimestamp = newValue;
-			this._lastDateTimestamp = newValue;
-			this._calendar.timestamp = newValue;
-			this._handleCalendarSelectedDatesChange();
-		} else {
-			this.closePicker();
-			this.isFirstDatePick = true;
-			if (newValue < this._firstDateTimestamp) {
-				this._lastDateTimestamp = this._firstDateTimestamp;
-				this._firstDateTimestamp = newValue;
-			} else {
-				this._oneTimeStampSelected = newValue === this._firstDateTimestamp;
-				this._lastDateTimestamp = newValue;
-			}
-			const fireChange = this._handleCalendarSelectedDatesChange();
-
-			if (fireChange) {
-				this.fireEvent("change", { value: this.realValue, valid: true });
-				// Angular two way data binding
-				this.fireEvent("value-changed", { value: this.realValue, valid: true });
-			}
-		}
+		return this._splitValueByDelimiter(value).every(dateString => super.isInValidRange(dateString));
 	}
 
 	/**
-	 * 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 ot 1
+	 * Extract both dates as timestamps, flip if necessary, and build (which will use the desired format so we enforce the format too)
+	 * @override
 	 */
-	async _changeDateValueWrapper(forward, years, months, days, step = 1) {
-		const emptyValue = this.value === "";
-		const isValid = emptyValue || this._checkValueValidity(this.value);
-
-		if (!isValid) {
-			return;
-		}
-
-		const dates = this._splitValueByDelimiter(this.value);
-		const innerInput = this.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
-		const caretPos = this._getCaretPosition(innerInput);
-		const first = dates[0] && caretPos <= dates[0].trim().length + 1;
-		const last = dates[1] && (caretPos >= this.value.length - dates[1].trim().length - 1 && caretPos <= this.value.length);
-		let firstDate = this.getFormat().parse(dates[0]);
-		let lastDate = this.getFormat().parse(dates[1]);
-
-		if (first && firstDate) {
-			firstDate = this._changeDateValue(firstDate, forward, years, months, days, step);
-		} else if (last && lastDate) {
-			lastDate = this._changeDateValue(lastDate, forward, years, months, days, step);
+	normalizeValue(value) {
+		const firstDateTimestamp = this._extractFirstTimestamp(value);
+		const lastDateTimestamp = this._extractLastTimestamp(value);
+		if (firstDateTimestamp && lastDateTimestamp && firstDateTimestamp > lastDateTimestamp) { // if both are timestamps (not undefined), flip if necessary
+			return this._buildValue(lastDateTimestamp, firstDateTimestamp);
 		}
-
-		this.value = this._formatValue(firstDate.valueOf() / 1000, lastDate.valueOf() / 1000);
-
-		await RenderScheduler.whenFinished();
-		// Return the caret on the previous position after rendering
-		this._setCaretPosition(innerInput, caretPos);
+		return this._buildValue(firstDateTimestamp, lastDateTimestamp);
 	}
 
 	/**
-	 * This method is used in the derived classes
+	 * @override
 	 */
-	async _handleEnterPressed() {
-		const innerInput = this.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
-		const caretPos = this._getCaretPosition(innerInput);
+	onSelectedDatesChange(event) {
+		event.preventDefault(); // never let the calendar update its own dates, the parent component controls them
+		const values = event.detail.values;
 
-		this._confirmInput();
-
-		await RenderScheduler.whenFinished();
-		// Return the caret on the previous position after rendering
-		this._setCaretPosition(innerInput, caretPos);
-	}
-
-	_onfocusout() {
-		this._confirmInput();
-	}
-
-	_confirmInput() {
-		const emptyValue = this.value === "";
-
-		if (emptyValue) {
+		if (values.length === 0) {
 			return;
 		}
 
-		const dates = this._splitValueByDelimiter(this.value);
-		let firstDate = this.getFormat().parse(dates[0]);
-		let lastDate = this.getFormat().parse(dates[1]);
-
-		if (firstDate > lastDate) {
-			const temp = firstDate;
-			firstDate = lastDate;
-			lastDate = temp;
+		if (values.length === 1) { // Do nothing until the user selects 2 dates, we don't change any state at all for one date
+			this._tempValue = values[0];
+			return;
 		}
 
-		const newValue = this._formatValue(firstDate.valueOf() / 1000, lastDate.valueOf() / 1000);
-
-		this._setValue(newValue);
+		const newValue = this._buildValue(...event.detail.dates); // the value will be normalized so we don't need to order them here
+		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
+		this.closePicker();
 	}
 
 	/**
-	* Returns the caret (cursor) position of the specified text field (field).
-	* Return value range is 0-field.value.length.
-	*/
-	_getCaretPosition(field) {
-		// Initialize
-		let caretPos = 0;
-
-		// IE Support
-		if (document.selection) {
-			// Set focus on the element
-			field.focus();
-
-			// To get cursor position, get empty selection range
-			const selection = document.selection.createRange();
-
-			// Move selection start to 0 position
-			selection.moveStart("character", -field.value.length);
-
-			// The caret position is selection length
-			caretPos = selection.text.length;
-		} else if (field.selectionStart || field.selectionStart === "0") { // Firefox support
-			caretPos = field.selectionDirection === "backward" ? field.selectionStart : field.selectionEnd;
+	 * @override
+	 */
+	async _modifyDateValue(amount, unit) {
+		if (!this._endDateTimestamp) { // If empty or only one date -> treat as datepicker entirely
+			return super._modifyDateValue(amount, unit);
 		}
 
-		return caretPos;
-	}
+		const input = this._getInput();
+		let caretPos = input.getCaretPosition();
+		let newValue;
 
-	_setCaretPosition(field, caretPos) {
-		if (field.createTextRange) {
-			const range = field.createTextRange();
-			range.move("character", caretPos);
-			range.select();
-		} else if (field.selectionStart) {
-			field.focus();
-			field.setSelectionRange(caretPos, caretPos);
+		if (caretPos <= this.value.indexOf(this._effectiveDelimiter)) { // The user is focusing the first date -> change it and keep the seoond date
+			const startDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._startDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
+			const newStartDateTimestamp = startDateModified.valueOf() / 1000;
+			if (newStartDateTimestamp > this._endDateTimestamp) { // dates flipped -> move the caret to the same position but on the last date
+				caretPos += Math.ceil(this.value.length / 2);
+			}
+			newValue = this._buildValue(newStartDateTimestamp, this._endDateTimestamp); // the value will be normalized so we don't try to order them here
 		} else {
-			field.focus();
+			const endDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._endDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
+			const newEndDateTimestamp = endDateModified.valueOf() / 1000;
+			newValue = this._buildValue(this._startDateTimestamp, newEndDateTimestamp); // the value will be normalized so we don't try to order them here
+			if (newEndDateTimestamp < this._startDateTimestamp) { // dates flipped -> move the caret to the same position but on the first date
+				caretPos -= Math.ceil(this.value.length / 2);
+			}
 		}
+		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
+
+		await renderFinished();
+		input.setCaretPosition(caretPos); // Return the caret to the previous (or the adjusted, if dates flipped) position after rendering
 	}
 
-	_handleCalendarSelectedDatesChange() {
-		this._updateValueCalendarSelectedDatesChange();
-		this._cleanHoveredAttributeFromVisibleItems();
+	get _effectiveDelimiter() {
+		return this.delimiter || this.constructor.getMetadata().getProperties().delimiter.defaultValue; // treat empty string as the default value
+	}
 
-		this._calendar.timestamp = this._firstDateTimestamp;
-		this._calendar.selectedDates = this.dateIntervalArrayBuilder(this._firstDateTimestamp * 1000, this._lastDateTimestamp * 1000);
-		this._focusInputAfterClose = true;
+	_splitValueByDelimiter(value) {
+		const valuesArray = [];
+		const partsArray = value.split(this._effectiveDelimiter);
 
-		if (this.isInValidRange(this.realValue)) {
-			this.valueState = ValueState.None;
-		} else {
-			this.valueState = ValueState.Error;
-		}
+		valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
+		valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
 
-		return true;
+		return valuesArray;
 	}
 
-	async _cleanHoveredAttributeFromVisibleItems(dayPicker) {
-		if (!dayPicker) {
-			return;
+	/**
+	 * Returns a UTC timestamp, representing the first date in the value string or undefined if the value is empty
+	 * @private
+	 */
+	_extractFirstTimestamp(value) {
+		if (!value || !this._checkValueValidity(value)) {
+			return undefined;
 		}
 
-		const daypicker = await this.getDayPicker();
-		const dayItems = daypicker.shadowRoot.querySelectorAll(".ui5-dp-item");
-
-		for (let i = 0; i < dayItems.length; i++) {
-			dayItems[i].removeAttribute("hovered");
-		}
+		const dateStrings = this._splitValueByDelimiter(value); // at least one item guaranteed due to the checks above (non-empty and valid)
+		return this.getFormat().parse(dateStrings[0], true).getTime() / 1000;
 	}
 
-	_updateValueCalendarSelectedDatesChange() {
-		const calStartDate = CalendarDate.fromTimestamp(this._firstDateTimestamp * 1000, this._primaryCalendarType);
-		const calEndDate = CalendarDate.fromTimestamp(this._lastDateTimestamp * 1000, this._primaryCalendarType);
+	/**
+	 * Returns a UTC timestamp, representing the last date in the value string or undefined if the value is empty or there is just one date
+	 * @private
+	 */
+	_extractLastTimestamp(value) {
+		if (!value || !this._checkValueValidity(value)) {
+			return undefined;
+		}
 
-		// Collect both dates and merge them into one
-		if (this._firstDateTimestamp !== this._lastDateTimestamp || this._oneTimeStampSelected) {
-			this.value = this._formatValue(calStartDate.toLocalJSDate().valueOf() / 1000, calEndDate.toLocalJSDate().valueOf() / 1000);
+		const dateStrings = this._splitValueByDelimiter(value);
+		if (dateStrings[1]) {
+			return this.getFormat().parse(dateStrings[1], true).getTime() / 1000;
 		}
 
-		this.realValue = this._formatValue(calStartDate.toLocalJSDate().valueOf() / 1000, calEndDate.toLocalJSDate().valueOf() / 1000);
-		this._prevValue = this.realValue;
+		return undefined;
 	}
 
 	/**
-	 * Combines the start and end dates of a range into a formated string
-	 *
-	 * @param {int} firstDateValue locale start date timestamp
-	 * @param {int} lastDateValue locale end date timestamp
-	 * @returns {string} formated start to end date range
+	 * Builds a string value out of two UTC timestamps - this method is the counterpart to _extractFirstTimestamp/_extractLastTimestamp
+	 * @private
 	 */
-	_formatValue(firstDateValue, lastDateValue) {
-		let value = "";
-		const delimiter = this.delimiter,
-			format = this.getFormat(),
-			firstDateString = format.format(new Date(firstDateValue * 1000)),
-			lastDateString = format.format(new Date(lastDateValue * 1000));
-
-		if (firstDateValue) {
-			if (delimiter && delimiter !== "" && lastDateString) {
-				value = firstDateString.concat(" ", delimiter, " ", lastDateString);
-			} else {
-				value = firstDateString;
+	_buildValue(firstDateTimestamp, lastDateTimestamp) {
+		if (firstDateTimestamp) {
+			const firstDateString = this._getStringFromTimestamp(firstDateTimestamp * 1000);
+
+			if (!lastDateTimestamp) {
+				return firstDateString;
 			}
+
+			const lastDateString = this._getStringFromTimestamp(lastDateTimestamp * 1000);
+			return `${firstDateString} ${this._effectiveDelimiter} ${lastDateString}`;
 		}
 
-		return value;
+		return "";
 	}
 }