date-picker timezone init

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

@@ -0,0 +1,99 @@
+import { css, html, nothing } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property, state } from 'lit/decorators.js';
+import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { UUIInputEvent, UUISelectEvent } from '@umbraco-ui/uui';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+@customElement('umb-input-date-picker')
+export class UmbInputDatePickerElement extends FormControlMixin(UmbLitElement) {
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+			}
+		`,
+	];
+
+	protected getFormElement() {
+		return undefined;
+	}
+
+	@property({ type: String })
+	type = 'date';
+
+	@property({ type: String })
+	datetime = '';
+
+	@property({ type: Boolean })
+	enableTimezones = false;
+
+	@state()
+	private _currentTimezone?: string;
+
+	constructor() {
+		super();
+	}
+
+	options: Array<Option> = [
+		{ name: 'Carrot', value: 'orange' },
+		{ name: 'Cucumber', value: 'green' },
+		{ name: 'Aubergine', value: 'purple' },
+		{ name: 'Blueberry', value: 'Blue' },
+		{ name: 'Banana', value: 'yellow' },
+		{ name: 'Strawberry', value: 'red' },
+	];
+
+	connectedCallback(): void {
+		super.connectedCallback();
+		this.value = this.datetime;
+	}
+
+	#onDatetimeChange(e: UUIInputEvent) {
+		e.stopPropagation();
+
+		this.datetime = e.target.value as string;
+		const append = this._currentTimezone ? `,${this._currentTimezone}` : '';
+		this.value = this.datetime + append;
+
+		this.dispatchEvent(new CustomEvent('change'));
+	}
+
+	#onTimezoneChange(e: UUISelectEvent) {
+		e.stopPropagation();
+
+		const tz = e.target.value as string;
+		this._currentTimezone = tz;
+		this.value = `${this.datetime},${tz}`;
+
+		this.dispatchEvent(new CustomEvent('change'));
+	}
+
+	render() {
+		return html`<uui-input
+				id="datetime"
+				@change="${this.#onDatetimeChange}"
+				label="Pick a date or time"
+				.type="${this.type}"
+				.value="${this.datetime}"></uui-input>
+			${this.enableTimezones ? this.#renderTimezone() : nothing}`;
+	}
+
+	#renderTimezone() {
+		return html`<uui-select
+			id="timezone"
+			@change="${this.#onTimezoneChange}"
+			label="Select timezone"
+			placeholder="Pick timezone"
+			.options="${this.options}"></uui-select>`;
+	}
+}
+
+export default UmbInputDatePickerElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-date-picker': UmbInputDatePickerElement;
+	}
+}

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

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import './input-date-picker.element';
+import type { UmbInputDatePickerElement } from './input-date-picker.element';
+
+const meta: Meta<UmbInputDatePickerElement> = {
+	title: 'Components/Inputs/Date Picker',
+	component: 'umb-input-date-picker',
+};
+
+export default meta;
+type Story = StoryObj<UmbInputDatePickerElement>;
+
+export const Overview: Story = {
+	args: {},
+};
+
+export const WithOpacity: Story = {
+	args: {},
+};
+
+export const WithSwatches: Story = {
+	args: {},
+};

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

@@ -0,0 +1,18 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbInputDatePickerElement } from './input-date-picker.element';
+import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
+describe('UmbInputDatePickerElement', () => {
+	let element: UmbInputDatePickerElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-input-date-picker></umb-input-date-picker> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbInputDatePickerElement);
+	});
+
+	it('passes the a11y audit', async () => {
+		await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+	});
+});

src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts

@@ -223,12 +223,17 @@ export const data: Array<DataTypeResponseModel | FolderTreeItemResponseModel> =
 		values: [
 			{
 				alias: 'format',
-				value: 'YYYY-MM-DD',
+				value: 'YYYY-MM-DDTHH:mm',
 			},
 			{
 				alias: 'offsetTime',
 				value: true,
 			},
+			{
+				alias: 'enableTimezones',
+				value: true,
+			},
+			{},
 		],
 	},
 	{
@@ -571,7 +576,12 @@ export const data: Array<DataTypeResponseModel | FolderTreeItemResponseModel> =
 		parentId: null,
 		propertyEditorAlias: 'Umbraco.Decimal',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.Decimal',
-		values: [],
+		values: [
+			{
+				alias: 'step',
+				value: 0.01,
+			},
+		],
 	},
 	{
 		$type: '',