feat(ui5-daterange-picker): keyboard handling improvement

packages/main/src/DatePicker.js

@@ -503,6 +503,102 @@ class DatePicker extends UI5Element {
 				this._toggleAndFocusInput();
 			}
 		}
+
+		if (this.isOpen()) {
+			return;
+		}
+
+		if (isPageUpShiftCtrl(event)) {
+			event.preventDefault();
+			this._changeDateValueWrapper(true, true, false, false);
+		} else if (isPageUpShift(event)) {
+			event.preventDefault();
+			this._changeDateValueWrapper(true, false, true, false);
+		} else if (isPageUp(event)) {
+			event.preventDefault();
+			this._changeDateValueWrapper(true, false, false, true);
+		}
+
+		if (isPageDownShiftCtrl(event)) {
+			event.preventDefault();
+			this._changeDateValueWrapper(false, true, false, false);
+		} else if (isPageDownShift(event)) {
+			event.preventDefault();
+			this._changeDateValueWrapper(false, false, true, false);
+		} else if (isPageDown(event)) {
+			event.preventDefault();
+			this._changeDateValueWrapper(false, false, false, true);
+		}
+	}
+
+	/**
+	 * Adds or extracts a given number of measuring units from the "dateValue" property value
+	 *
+	 * @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 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);
+		this.fireEvent("change", { value: this.value, valid: true });
+	}
+
+	/**
+	 * 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
+	 */
+	_changeDateValue(date, forward, years, months, days, step = 1) {
+		if (!date) {
+			return;
+		}
+
+		const oldDate = new Date(date.getTime());
+		const incrementStep = forward ? step : -step;
+
+		if (incrementStep === 0) {
+			return;
+		}
+
+		if (days) {
+			date.setDate(date.getDate() + incrementStep);
+		} else if (months) {
+			date.setMonth(date.getMonth() + incrementStep);
+			const monthDiff = (date.getFullYear() - oldDate.getFullYear()) * 12 + (date.getMonth() - oldDate.getMonth());
+
+			if (date.getMonth() === oldDate.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
+				date.setDate(0);
+			}
+		} else if (years) {
+			date.setFullYear(date.getFullYear() + incrementStep);
+
+			if (date.getMonth() !== oldDate.getMonth()) {
+				// day doesn't exist in this month (February 29th)
+				date.setDate(0);
+			}
+		} else {
+			return;
+		}
+
+		if (date.valueOf() < this._minDate) {
+			date = new Date(this._minDate);
+		} else if (date.valueOf() > this._maxDate) {
+			date = new Date(this._maxDate);
+		}
+
+		return date;
 	}
 
 	_toggleAndFocusInput() {

packages/main/src/DateRangePicker.js

@@ -3,6 +3,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.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";
 
 // Styles
 import DateRangePickerCss from "./generated/themes/DateRangePicker.css.js";
@@ -63,6 +64,25 @@ const metadata = {
  * <h3>ES6 Module Import</h3>
  *
  * <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:
+ * <br>
+ * <ul>
+ * <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li>
+ * <li>[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one</li>
+ * <li>[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one</li>
+ * <li>[PAGEUP] - Increments the corresponding day of the month by one</li>
+ * <li>[SHIFT] + [PAGEUP] - Increments the corresponding month by one</li>
+ * <li>[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one</li>
+ * </ul>
  *
  * @constructor
  * @author SAP SE
@@ -368,6 +388,95 @@ class DateRangePicker extends DatePicker {
 		}
 	}
 
+	/**
+	 * Adds or extracts a given number of measuring units from the "dateValue" property value
+	 *
+	 * @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
+	 */
+	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);
+		}
+
+		if (firstDate > lastDate) {
+			const temp = firstDate;
+			firstDate = lastDate;
+			lastDate = temp;
+		}
+
+		const newValue = this._formatValue(firstDate.valueOf() / 1000, lastDate.valueOf() / 1000);
+
+		this._setValue(newValue);
+		await RenderScheduler.whenFinished();
+
+		// Return the carent on the previous position after rendering
+		this._setCaretPosition(innerInput, caretPos);
+
+		this.fireEvent("change", { value: newValue, valid: isValid });
+	}
+
+	/**
+	* 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;
+		}
+
+		return caretPos;
+	}
+
+	_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);
+		} else {
+			field.focus();
+		}
+	}
+
 	_handleCalendarSelectedDatesChange() {
 		this._updateValueCalendarSelectedDatesChange();
 		this._cleanHoveredAttributeFromVisibleItems();

packages/main/src/DayPicker.js

@@ -358,9 +358,7 @@ class DayPicker extends UI5Element {
 	}
 
 	onAfterRendering() {
-		if (this.selectedDates.length === 1) {
-			this.fireEvent("daypickerrendered", { focusedItemIndex: this._itemNav.currentIndex });
-		}
+		this._fireDayPickerRendered();
 	}
 
 	_onmousedown(event) {
@@ -613,6 +611,18 @@ class DayPicker extends UI5Element {
 		}
 
 		this.fireEvent("navigate", { timestamp: (oNewDate.valueOf() / 1000) });
+		const newItemIndex = this._itemNav._getItems().findIndex(item => parseInt(item.timestamp) === timestamp);
+		this._itemNav.currentIndex = newItemIndex;
+
+		this._itemNav.focusCurrent();
+
+		this._fireDayPickerRendered();
+	}
+
+	_fireDayPickerRendered() {
+		if (this.selectedDates.length === 1) {
+			this.fireEvent("daypickerrendered", { focusedItemIndex: this._itemNav.currentIndex });
+		}
 	}
 
 	_isWeekend(oDate) {

packages/main/test/pages/DateRangePicker.html

@@ -44,7 +44,7 @@ <h3>daterange-picker with minDate 01/09/2019 and maxDate 01/11/2019</h3>
 		<section class="ui5-content-density-compact">
 			<h3>daterange-picker in Compact</h3>
 			<div>
-				<ui5-daterange-picker delimiter="@"></ui5-daterange-picker>
+				<ui5-daterange-picker id="daterange-picker5" delimiter="@"></ui5-daterange-picker>
 			</div>
 		</section>
 

packages/main/test/specs/DateRangePicker.spec.js

@@ -87,4 +87,94 @@ describe("DateRangePicker general interaction", () => {
 
 		assert.strictEqual(browser.$("#labelChange").getHTML(false), "1", "The change event was fired once");
 	});
+
+	it("Page up/down increments/decrements day value", () => {
+		const dateRange = browser.$("#daterange-picker5");
+
+		browser.execute(() => {
+			const dateRange = document.getElementById("daterange-picker5");
+			const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
+			dateRange._setValue("Jul 16, 2020 @ Jul 29, 2020");
+			innerInput.click();
+			dateRange._setCaretPosition(innerInput, 15);
+		});
+
+		browser.keys('PageDown');
+		assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 28, 2020");
+
+		browser.keys('PageUp');
+		assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2020");
+
+		browser.execute(() => {
+			const dateRange = document.getElementById("daterange-picker5");
+			const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
+			dateRange._setCaretPosition(innerInput, 5);
+		});
+
+		browser.keys('PageDown');
+		assert.strictEqual(dateRange.getProperty("value"), "Jul 15, 2020 @ Jul 29, 2020");
+
+		browser.keys('PageUp');
+		assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2020");
+	});
+
+	it("Page up/down increments/decrements month value", () => {
+		const dateRange = browser.$("#daterange-picker5");
+
+		browser.execute(() => {
+			const dateRange = document.getElementById("daterange-picker5");
+			const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
+			dateRange._setValue("Jul 16, 2020 @ Jul 29, 2020");
+			innerInput.click();
+			dateRange._setCaretPosition(innerInput, 15);
+		});
+
+		browser.keys(['Shift', 'PageUp']);
+		assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Aug 29, 2020");
+
+		browser.keys(['Shift', 'PageDown']);
+		assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2020");
+
+		browser.execute(() => {
+			const dateRange = document.getElementById("daterange-picker5");
+			const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
+			dateRange._setCaretPosition(innerInput, 5);
+		});
+
+		browser.keys(['Shift', 'PageDown']);
+		assert.strictEqual(dateRange.getProperty("value"), "Jun 16, 2020 @ Jul 29, 2020");
+
+		browser.keys(['Shift', 'PageUp']);
+		assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2020");
+	});
+
+	it("Page up/down increments/decrements year value", () => {
+		const dateRange = browser.$("#daterange-picker5");
+
+		browser.execute(() => {
+			const dateRange = document.getElementById("daterange-picker5");
+			const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
+			dateRange._setValue("Jul 16, 2020 @ Jul 29, 2020");
+			innerInput.click();
+			dateRange._setCaretPosition(innerInput, 15);
+		});
+
+		browser.keys(['Control', 'Shift', 'PageUp']);
+		assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2021");
+
+		browser.keys(['Control', 'Shift', 'PageDown']);
+		assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2020");
+
+		browser.execute(() => {
+			const dateRange = document.getElementById("daterange-picker5");
+			const innerInput = dateRange.shadowRoot.querySelector("ui5-input").shadowRoot.querySelector(".ui5-input-inner");
+			dateRange._setCaretPosition(innerInput, 5);
+		});
+
+		browser.keys(['Control', 'Shift', 'PageDown']);
+		assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2019 @ Jul 29, 2020");
+
+		browser.keys(['Control', 'Shift', 'PageUp']);
+		assert.strictEqual(dateRange.getProperty("value"), "Jul 16, 2020 @ Jul 29, 2020");
+	});
 });