fix(ui5-daterange-picker): enable selection of single day (#2157)

Author: fifoosid

packages/main/src/DateRangePicker.js

@@ -92,21 +92,36 @@ class DateRangePicker extends DatePicker {
 	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);
 	}
 
 	async onAfterRendering() {
-		this.responsivePopover = await this._respPopover();
-		const calendar = this.responsivePopover.querySelector(`#${this._id}-calendar`);
-		const dayPicker = calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`);
-		dayPicker.addEventListener("item-mouseover", this._itemMouseoverHandler);
-		dayPicker.addEventListener("daypickerrendered", this._keyboardNavigationHandler);
+		const daypicker = this.getDayPicker();
+		this._cleanHoveredAttributeFromVisibleItems(daypicker);
+		this._initialRendering = false;
+	}
+
+	async onEnterDOM() {
+		const daypicker = await this.getDayPicker();
+		daypicker.addEventListener("item-mouseover", this._dayPickerMouseoverHandler);
+		daypicker.addEventListener("daypickerrendered", this._keyboardNavigationHandler);
+	}
 
-		this._cleanHoveredAttributeFromVisibleItems(dayPicker);
+	async onExitDOM() {
+		const daypicker = await this.getDayPicker();
+		daypicker.removeEventListener("item-mouseover", this._dayPickerMouseoverHandler);
+		daypicker.removeEventListener("daypickerrendered", this._keyboardNavigationHandler);
 	}
 
 	_itemMouseoverHandler(event) {
+		if (this._oneTimeStampSelected) {
+			return;
+		}
+
 		const dayItems = event.target.shadowRoot.querySelectorAll(".ui5-dp-item");
-		const firstDateTimestamp = this._selectedDates[0];
+		const firstDateTimestamp = event.target._selectedDates[0];
 		const lastDateTimestamp = event.detail.target.parentElement.dataset.sapTimestamp;
 
 		for (let i = 0; i < dayItems.length; i++) {
@@ -198,6 +213,11 @@ class DateRangePicker extends DatePicker {
 			timestamp = focusTimestamp || oCalDate.valueOf() / 1000,
 			dates = this._splitValueByDelimiter(this.value);
 
+		if (this._initialRendering) {
+			this._oneTimeStampSelected = dates[0].trim() === dates[1].trim();
+			this._setValue(this.value);
+		}
+
 		this._calendar = Object.assign({}, this._calendar);
 		this._calendar.timestamp = timestamp;
 		if (this.value && this._checkValueValidity(this.value)) {
@@ -245,10 +265,21 @@ class DateRangePicker extends DatePicker {
 		return this.placeholder !== undefined ? this.placeholder : this._displayFormat.concat(" ", this.delimiter, " ", this._displayFormat);
 	}
 
+	async getDayPicker() {
+		this.responsivePopover = await this._respPopover();
+		const calendar = this.responsivePopover.querySelector(`#${this._id}-calendar`);
+		return calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`);
+	}
+
 	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);
@@ -307,13 +338,8 @@ class DateRangePicker extends DatePicker {
 
 	_handleCalendarChange(event) {
 		const newValue = event.detail.dates && event.detail.dates[0];
-		const calendarSelectedDates = this._calendar.selectedDates;
-
-		if (calendarSelectedDates[0] === newValue || calendarSelectedDates[calendarSelectedDates.length - 1] === newValue) {
-			this.closePicker();
-			return false;
-		}
 
+		this._oneTimeStampSelected = false;
 		if (this.isFirstDatePick) {
 			this.isFirstDatePick = false;
 			this._firstDateTimestamp = newValue;
@@ -327,6 +353,7 @@ class DateRangePicker extends DatePicker {
 				this._lastDateTimestamp = this._firstDateTimestamp;
 				this._firstDateTimestamp = newValue;
 			} else {
+				this._oneTimeStampSelected = newValue === this._firstDateTimestamp;
 				this._lastDateTimestamp = newValue;
 			}
 			const fireChange = this._handleCalendarSelectedDatesChange();
@@ -356,12 +383,13 @@ class DateRangePicker extends DatePicker {
 		return true;
 	}
 
-	_cleanHoveredAttributeFromVisibleItems(dayPicker) {
+	async _cleanHoveredAttributeFromVisibleItems(dayPicker) {
 		if (!dayPicker) {
 			return;
 		}
 
-		const dayItems = dayPicker.shadowRoot.querySelectorAll(".ui5-dp-item");
+		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");
@@ -382,7 +410,7 @@ class DateRangePicker extends DatePicker {
 			lastDateString = format.format(new Date(lastDateValue * 1000));
 
 		if (firstDateValue) {
-			if (delimiter && delimiter !== "" && lastDateString && lastDateString !== firstDateString) {
+			if (delimiter && delimiter !== "" && lastDateString) {
 				value = firstDateString.concat(" ", delimiter, " ", lastDateString);
 			} else {
 				value = firstDateString;

packages/main/test/pages/DateRangePicker.html

@@ -47,6 +47,9 @@ <h3>daterange-picker in Compact</h3>
 				<ui5-daterange-picker delimiter="@"></ui5-daterange-picker>
 			</div>
 		</section>
+
+		<h3>DateRange Picker with one date selected as first & last</h3>
+		<ui5-daterange-picker id="daterange-picker5" value="Aug 20, 2020 - Aug 20, 2020"></ui5-daterange-picker>
 	</div>
 	<script>
 		document.getElementById('daterange-picker1').addEventListener('ui5-change', function(e) {

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

@@ -58,6 +58,20 @@ describe("DateRangePicker general interaction", () => {
 		assert.strictEqual(res.lastDateValue, "2019-10-10T00:00:00.000Z", "The last date is JS Date format");
 	});
 
+	it("Initially setting the same date as first & last is possible", () => {
+		const daterangepicker = browser.$("#daterange-picker5");
+
+		assert.strictEqual(daterangepicker.getProperty("firstDateValue"), daterangepicker.getProperty("lastDateValue"), "Initially properties are set correctly");
+	});
+
+	it("Setting the same date as first & last is possible", () => {
+		const daterangepicker = browser.$("#daterange-picker5");
+
+		daterangepicker.setProperty("value", "Aug 5, 2020 - Aug 5, 2020");
+
+		assert.strictEqual(daterangepicker.getProperty("firstDateValue"), daterangepicker.getProperty("lastDateValue"), "Properties are set correctly");
+	})
+
 	it("Change event fired once", () => {
 		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#daterange-picker1");
 		const dayPicker = browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`);