feat(ui5-datetime-picker): introduce new component (#1437)

* feat(ui5-datetime-picker): introduce new component

Background
The DateTimePicker component alows users to select both date (day, month and year) and time (hours, minutes and seconds).
The component opens a popover with calendar and time controls.
On smaller screen and on phone device there is a switch to change between the calendar and time controls.
Technical points
- extends DatePicker
- reuses the DatePicker template and WheelSlider component
- refactors the DatePicker to make it more extensible and overwrite few methods
- extracts time related functions

Author: ilhan007

packages/main/bundle.esm.js

@@ -35,6 +35,7 @@ import ComboBox from "./dist/ComboBox.js";
 import ComboBoxItem from "./dist/ComboBoxItem.js";
 import MultiComboBoxItem from "./dist/MultiComboBoxItem.js";
 import DatePicker from "./dist/DatePicker.js";
+import DateTimePicker from "./dist/DateTimePicker.js";
 import DurationPicker from "./dist/DurationPicker.js";
 import Dialog from "./dist/Dialog.js";
 import FileUploader from "./dist/FileUploader.js";

packages/main/src/DatePicker.hbs

@@ -21,7 +21,7 @@
 		{{#unless readonly}}
 			<ui5-icon
 				slot="icon"
-				name="appointment-2"
+				name="{{openIconName}}"
 				tabindex="-1"
 				accessible-name="{{openIconTitle}}"
 				show-tooltip
@@ -34,4 +34,4 @@
 	</ui5-input>
 
 	<slot name="formSupport"></slot>
-</div>
+</div>

packages/main/src/DatePicker.js

@@ -303,8 +303,6 @@ class DatePicker extends UI5Element {
 			allowTargetOverlap: true,
 			stayOpenOnScroll: true,
 			afterClose: () => {
-				const calendar = this.responsivePopover.querySelector(`#${this._id}-calendar`);
-
 				this._isPickerOpen = false;
 
 				if (isPhone()) {
@@ -315,13 +313,20 @@ class DatePicker extends UI5Element {
 					this._focusInputAfterClose = false;
 				}
 
-				calendar._hideMonthPicker();
-				calendar._hideYearPicker();
+				const calendar = this.responsivePopover.querySelector(`#${this._id}-calendar`);
+				if (calendar) {
+					calendar._hideMonthPicker();
+					calendar._hideYearPicker();
+				}
 			},
 			afterOpen: () => {
 				const calendar = this.responsivePopover.querySelector(`#${this._id}-calendar`);
-				const dayPicker = calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`);
 
+				if (!calendar) {
+					return;
+				}
+
+				const dayPicker = calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`);
 				const selectedDay = dayPicker.shadowRoot.querySelector(".ui5-dp-item--selected");
 				const today = dayPicker.shadowRoot.querySelector(".ui5-dp-item--now");
 				let focusableDay = selectedDay || today;
@@ -346,7 +351,7 @@ class DatePicker extends UI5Element {
 		};
 
 		this._calendar = {
-			onSelectedDatesChange: this._handleCalendarSelectedDatesChange.bind(this),
+			onSelectedDatesChange: this._handleCalendarChange.bind(this),
 			selectedDates: [],
 		};
 
@@ -534,6 +539,18 @@ class DatePicker extends UI5Element {
 		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
+	get phone() {
+		return isPhone();
+	}
+
+	get showHeader() {
+		return this.phone;
+	}
+
+	get showFooter() {
+		return this.phone;
+	}
+
 	getFormat() {
 		if (this._isPattern) {
 			this._oDateFormat = DateFormat.getInstance({
@@ -579,6 +596,10 @@ class DatePicker extends UI5Element {
 		return this.i18nBundle.getText(DATEPICKER_OPEN_ICON_TITLE);
 	}
 
+	get openIconName() {
+		return "appointment-2";
+	}
+
 	get dateAriaDescription() {
 		return this.i18nBundle.getText(DATEPICKER_DATE_ACC_TEXT);
 	}
@@ -596,35 +617,49 @@ class DatePicker extends UI5Element {
 		return !this.disabled && !this.readonly;
 	}
 
-	_handleCalendarSelectedDatesChange(event) {
+	_handleCalendarChange(event) {
 		const iNewValue = event.detail.dates && event.detail.dates[0];
 
 		if (this._calendar.selectedDates.indexOf(iNewValue) !== -1) {
 			this.closePicker();
-			return;
+			return false;
 		}
 
-		this.value = this.getFormat().format(
-			new Date(CalendarDate.fromTimestamp(
-				iNewValue * 1000,
-				this._primaryCalendarType
-			).valueOf()),
-			true
-		);
-		this._calendar.timestamp = iNewValue;
+		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 });
+		}
+
+		this.closePicker();
+	}
+
+	_handleCalendarSelectedDatesChange(event, newValue) {
+		this._updateValueCalendarSelectedDatesChange(newValue);
+
+		this._calendar.timestamp = newValue;
 		this._calendar.selectedDates = event.detail.dates;
 		this._focusInputAfterClose = true;
-		this.closePicker();
 
 		if (this.isInValidRange(this._getTimeStampFromString(this.value))) {
 			this.valueState = ValueState.None;
 		} else {
 			this.valueState = ValueState.Error;
 		}
 
-		this.fireEvent("change", { value: this.value, valid: true });
-		// Angular two way data binding
-		this.fireEvent("value-changed", { value: this.value, valid: true });
+		return true;
+	}
+
+	_updateValueCalendarSelectedDatesChange(newValue) {
+		this.value = this.getFormat().format(
+			new Date(CalendarDate.fromTimestamp(
+				newValue * 1000,
+				this._primaryCalendarType
+			).valueOf()),
+			true
+		);
 	}
 
 	/**

packages/main/src/DatePickerPopover.hbs

@@ -1,6 +1,5 @@
 <ui5-responsive-popover
 	id="{{_id}}-responsive-popover"
-	content-only-on-desktop
 	allow-target-overlap="{{_respPopoverConfig.allowTargetOverlap}}"
 	stay-open-on-scroll="{{_respPopoverConfig.stayOpenOnScroll}}"
 	placement-type="Bottom"
@@ -11,6 +10,18 @@
 	@ui5-afterClose="{{_respPopoverConfig.afterClose}}"
 	@ui5-afterOpen="{{_respPopoverConfig.afterOpen}}"
 >
+	{{#if showHeader}}
+		{{> header}}
+	{{/if}}
+
+	{{> content}}
+
+	{{#if showFooter}}
+		{{> footer}}
+	{{/if}}
+</ui5-responsive-popover>
+
+{{#*inline "header"}}
 	<div slot="header" class="ui5-responsive-popover-header">
 		<div class="row">
 			<span>{{_headerTitleText}}</span>
@@ -22,6 +33,9 @@
 			</ui5-button>
 		</div>
 	</div>
+{{/inline}}
+
+{{#*inline "content"}}
 	<ui5-calendar
 		id="{{_id}}-calendar"
 		primary-calendar-type="{{_calendar.primaryCalendarType}}"
@@ -32,4 +46,6 @@
 		.maxDate="{{_calendar.maxDate}}"
 		@ui5-selectedDatesChange="{{_calendar.onSelectedDatesChange}}"
 	></ui5-calendar>
-</ui5-responsive-popover>
+{{/inline}}
+
+{{#*inline "footer"}}{{/inline}}