From bb38bf318ee12ca78b98a8b98d0cd71e008323b7 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Fri, 3 May 2024 11:02:53 +0200
Subject: [PATCH] fix: ensure that the datetime property editor treats the
 datetime strings as raw, i.e. do not assume anything about timezone and such

---
 .../property-editor-ui-date-picker.element.ts | 43 +++++++++++++------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-picker/property-editor-ui-date-picker.element.ts
index 12699ce6d0..b32cf266c4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-picker/property-editor-ui-date-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-picker/property-editor-ui-date-picker.element.ts
@@ -6,6 +6,23 @@ import type { UmbInputDateElement } from '@umbraco-cms/backoffice/components';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 
 /**
+ * This property editor allows the user to pick a date, datetime-local, or time.
+ * It uses raw datetime strings back and forth, and therefore it has no knowledge
+ * of timezones. It uses a regular HTML input element underneath, which supports the known
+ * definitions of "date", "datetime-local", and "time".
+ *
+ * The underlying input element reports the value differently depending on the type configuration. Here
+ * are some examples from the change event:
+ *
+ * date: 2024-05-03
+ * datetime-local: 2024-05-03T10:44
+ * time: 10:44
+ *
+ * These values are approximately similar to what Umbraco expects for the Umbraco.DateTime
+ * data editor with one exception: the "T" character in "datetime-local". To be backwards compatible, we are
+ * replacing the T character with a whitespace, which also happens to work just fine
+ * with the "datetime-local" type.
+ *
  * @element umb-property-editor-ui-date-picker
  */
 @customElement('umb-property-editor-ui-date-picker')
@@ -24,11 +41,9 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen
 
 	@property()
 	set value(value: string | undefined) {
-		if (value) {
-			// NOTE: If the `value` contains a space, then it doesn't contain the timezone, so may not be parsed as UTC. [LK]
-			const datetime = !value.includes(' ') ? value : value + ' +00';
-			this.#value = new Date(datetime).toJSON();
-		}
+		// Replace the potential time demoninator 'T' with a whitespace for backwards compatibility
+		this.#value = value?.replace('T', ' ');
+		console.log('got value', value, 'translated to', this.#value);
 	}
 	get value() {
 		return this.#value;
@@ -37,7 +52,6 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
-		const oldVal = this._inputType;
 
 		// Format string prevalue/config
 		const format = config.getValueByAlias<string>('format');
@@ -54,11 +68,14 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen
 		this._max = config.getValueByAlias('max');
 		this._step = config.getValueByAlias('step');
 
-		this.requestUpdate('_inputType', oldVal);
+		// If the inputType is only 'date' we need to make sure the value doesn't have a time
+		if (this._inputType === 'date' && this.value?.includes(' ')) {
+			this.value = this.value.split(' ')[0];
+		}
 	}
 
-	#onChange(event: CustomEvent & { target: HTMLInputElement }) {
-		this.value = event.target.value;
+	#onChange(event: CustomEvent & { target: UmbInputDateElement }) {
+		this.value = event.target.value.toString();
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
@@ -66,10 +83,10 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen
 		return html`
 			<umb-input-date
 				value="${ifDefined(this.value)}"
-				.min=${this._min}
-				.max=${this._max}
-				.step=${this._step}
-				.type=${this._inputType}
+				min=${ifDefined(this._min)}
+				max=${ifDefined(this._max)}
+				step=${ifDefined(this._step)}
+				type=${this._inputType}
 				@change=${this.#onChange}>
 			</umb-input-date>
 		`;