diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
index 3ebaf9d8a0..376df45aa9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { UmbPropertyValueChangeEvent } from '../..';
 import { UmbLitElement } from '@umbraco-cms/element';
 
 /**
@@ -13,11 +14,40 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement {
 	@property()
 	value = '';
 
+	private updateValue(e: InputEvent) {
+		console.log('config', this.config);
+
+		const dateField = e.target as HTMLInputElement;
+		this.value = dateField.value;
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
+	}
+
 	@property({ type: Array, attribute: false })
 	public config = [];
 
+	// CONFIG 
+	// Date format string
+	// if empty = YYYY-MM-DD
+
+	// Based on the format string
+	// We need to change the underlying type for UUI-input
+
+	// YYYY-MM-DD = date
+	// YYYY-MM-DD HH:mm:ss = datetime-local
+	// HH:mm:ss = time
+	// HH:mm = time
+
+
+	// Config offset time? (Boolean)
+	// Copmpares against a global value in Umbraco.Sys.SeverVariables
+
+
 	render() {
-		return html`<div>umb-property-editor-ui-date-picker</div>`;
+		return html`
+			<uui-input type="date" @input=${this.updateValue} .value=${this.value}></uui-input>
+			<div>
+				<small>Chosen Value: ${this.value}</small>
+			</div>`;
 	}
 }