fix(ui5-daterange-picker): show value in input only when first & last… (

#2098)
SAP · Sep 24, 2020 · f56cb66 · f56cb66
1 parent 19afe90
commit f56cb66
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
@@ -478,7 +478,7 @@ class DatePicker extends UI5Element {
 			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)) {
+		if (this._checkValueValidity(this.value) || this.checkRealValueValidity()) {
 			this._changeCalendarSelection();
 		} else {
 			this._calendar.selectedDates = [];
@@ -649,6 +649,13 @@ class DatePicker extends UI5Element {
 		return this.isValid(value) && this.isInValidRange(this._getTimeStampFromString(value));
 	}
 
+	/**
+	 * This method is used in the derived classes
+	 */
+	checkRealValueValidity() {
+		return false;
+	}
+
 	_click(event) {
 		if (isPhone()) {
 			this.responsivePopover.open(this);

diff --git a/packages/main/src/DateRangePicker.js b/packages/main/src/DateRangePicker.js
@@ -206,7 +206,8 @@ class DateRangePicker extends DatePicker {
 
 		this._calendar.selectedDates = this.dateIntervalArrayBuilder(this._firstDateTimestamp * 1000, this._lastDateTimestamp * 1000);
 		this.value = this._formatValue(this._firstDateTimestamp, this._lastDateTimestamp);
-		this._prevValue = this.value;
+		this.realValue = this.value;
+		this._prevValue = this.realValue;
 	}
 
 	_changeCalendarSelection(focusTimestamp) {
@@ -217,23 +218,23 @@ class DateRangePicker extends DatePicker {
 
 		const oCalDate = this._calendarDate,
 			timestamp = focusTimestamp || oCalDate.valueOf() / 1000,
-			dates = this._splitValueByDelimiter(this.value);
+			dates = this._splitValueByDelimiter(this.realValue);
 
 		if (this._initialRendering) {
 			this._oneTimeStampSelected = dates[0].trim() === dates[1].trim();
-			this._setValue(this.value);
+			this._setValue(this.realValue);
 		}
 
 		this._calendar = Object.assign({}, this._calendar);
 		this._calendar.timestamp = timestamp;
-		if (this.value && this._checkValueValidity(this.value)) {
+		if (this.realValue && this._checkValueValidity(this.realValue)) {
 			this._calendar.selectedDates = this.dateIntervalArrayBuilder(this._getTimeStampFromString(dates[0]), this._getTimeStampFromString(dates[1]));
 		}
 	}
 
 	get _calendarDate() {
-		const dates = this._splitValueByDelimiter(this.value),
-			value = this._checkValueValidity(this.value) ? dates[0] : this.getFormat().format(new Date()),
+		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)),
@@ -243,6 +244,10 @@ class DateRangePicker extends DatePicker {
 		return oCalDateFirst;
 	}
 
+	get _shoudHideValueInInput() {
+		return this._firstDateTimestamp === this._lastDateTimestamp && this._firstDateTimestamp;
+	}
+
 	/**
 	 * Currently selected first date represented as JavaScript Date instance.
 	 *
@@ -303,6 +308,10 @@ class DateRangePicker extends DatePicker {
 		return this.isValid(value) && this.isInValidRange(value);
 	}
 
+	checkRealValueValidity() {
+		return this.isValid(this.realValue) && this.isInValidRange(this.realValue);
+	}
+
 	isValid(value) {
 		const dateStrings = this._splitValueByDelimiter(value, this.delimiter),
 			isFirstDateValid = super.isValid(dateStrings[0]),
@@ -363,9 +372,9 @@ class DateRangePicker extends DatePicker {
 			const fireChange = this._handleCalendarSelectedDatesChange();
 
 			if (fireChange) {
-				this.fireEvent("change", { value: this.value, valid: true });
+				this.fireEvent("change", { value: this.realValue, valid: true });
 				// Angular two way data binding
-				this.fireEvent("value-changed", { value: this.value, valid: true });
+				this.fireEvent("value-changed", { value: this.realValue, valid: true });
 			}
 		}
 	}
@@ -378,7 +387,7 @@ class DateRangePicker extends DatePicker {
 		this._calendar.selectedDates = this.dateIntervalArrayBuilder(this._firstDateTimestamp * 1000, this._lastDateTimestamp * 1000);
 		this._focusInputAfterClose = true;
 
-		if (this.isInValidRange(this.value)) {
+		if (this.isInValidRange(this.realValue)) {
 			this.valueState = ValueState.None;
 		} else {
 			this.valueState = ValueState.Error;
@@ -402,8 +411,12 @@ class DateRangePicker extends DatePicker {
 
 	_updateValueCalendarSelectedDatesChange() {
 		// Collect both dates and merge them into one
-		this.value = this._formatValue(this._firstDateTimestamp, this._lastDateTimestamp);
-		this._prevValue = this.value;
+		if (this._firstDateTimestamp !== this._lastDateTimestamp || this._oneTimeStampSelected) {
+			this.value = this._formatValue(this._firstDateTimestamp, this._lastDateTimestamp);
+		}
+
+		this.realValue = this._formatValue(this._firstDateTimestamp, this._lastDateTimestamp);
+		this._prevValue = this.realValue;
 	}
 
 	_formatValue(firstDateValue, lastDateValue) {