datetime local utc and offset

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/date-input/date-input.element.ts

@@ -1,6 +1,6 @@
 import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUIInputEvent } from '@umbraco-ui/uui';
@@ -8,14 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-date-input')
 export class UmbDateInputElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-			}
-		`,
-	];
+	static styles = [UUITextStyles, css``];
 
 	protected getFormElement() {
 		return undefined;
@@ -24,9 +17,6 @@ export class UmbDateInputElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String })
 	type = 'date';
 
-	@property({ type: String })
-	datetime = '';
-
 	@property({ type: String })
 	min?: string;
 
@@ -37,7 +27,10 @@ export class UmbDateInputElement extends FormControlMixin(UmbLitElement) {
 	step?: number;
 
 	@property({ type: Boolean })
-	offsetTime = false; //TODO
+	offsetTime = false;
+
+	@state()
+	private _localValue?: string;
 
 	constructor() {
 		super();
@@ -45,33 +38,50 @@ export class UmbDateInputElement extends FormControlMixin(UmbLitElement) {
 
 	connectedCallback(): void {
 		super.connectedCallback();
-		this.value = this.datetime;
+		this.offsetTime
+			? (this._localValue = this.value as string)
+			: (this._localValue = this.#getLocal(this.value as string));
+	}
+
+	#getUTC(timeLocal: string) {
+		const date = new Date(timeLocal);
+		const isoDate = date.toISOString();
+		return `${isoDate.substring(0, 10)}T${isoDate.substring(11, 19)}Z`;
+	}
+
+	#getLocal(timeUTC: string) {
+		const local = new Date(timeUTC);
+		const localString = `${local.getFullYear()}-${('0' + (local.getMonth() + 1)).slice(-2)}-${(
+			'0' + local.getDate()
+		).slice(-2)}T${('0' + local.getHours()).slice(-2)}:${('0' + local.getMinutes()).slice(-2)}:${(
+			'0' + local.getSeconds()
+		).slice(-2)}Z`;
+		return localString;
 	}
 
 	#onDatetimeChange(e: UUIInputEvent) {
 		e.stopPropagation();
-
 		const pickedTime = e.target.value as string;
-		this.datetime = pickedTime;
-
-		// Set property editor value to UTC
-		const date = new Date(pickedTime);
-		const isoDate = date.toISOString();
-		this.value = `${isoDate.substring(0, 10)} ${isoDate.substring(11, 19)}`;
+		this.offsetTime ? (this.value = pickedTime) : (this.value = this.#getUTC(pickedTime));
 
+		this._localValue = pickedTime;
 		this.dispatchEvent(new CustomEvent('change'));
 	}
 
 	render() {
 		return html`<uui-input
-			id="datetime"
-			@change="${this.#onDatetimeChange}"
-			label="Pick a date or time"
-			.type="${this.type}"
-			min="${ifDefined(this.min)}"
-			max="${ifDefined(this.max)}"
-			.step="${this.step}"
-			.value="${this.datetime}"></uui-input>`;
+				id="datetime"
+				@change="${this.#onDatetimeChange}"
+				label="Pick a date or time"
+				.type="${this.type}"
+				min="${ifDefined(this.min)}"
+				max="${ifDefined(this.max)}"
+				.step="${this.step}"
+				.value="${this._localValue?.replace('Z', '')}"></uui-input>
+			<br /><br />
+			UTC: ${this.value}<br />
+			Local ${this._localValue}<br />
+			offset: ${this.offsetTime}`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/date-input/date-input.stories.ts

@@ -11,13 +11,9 @@ export default meta;
 type Story = StoryObj<UmbDateInputElement>;
 
 export const Overview: Story = {
-	args: {},
-};
-
-export const WithOpacity: Story = {
-	args: {},
-};
-
-export const WithSwatches: Story = {
-	args: {},
+	args: {
+		type: 'datetime-local',
+		value: '2023-04-01T10:00:00Z',
+		offsetTime: true,
+	},
 };