@umbraco-cms/backoffice 14.1.0 → 14.1.2

package/dist-cms/packages/property-editors/date-picker/property-editor-ui-date-picker.element.d.ts

@@ -28,6 +28,7 @@ export declare class UmbPropertyEditorUIDatePickerElement extends UmbLitElement
     private _max?;
     private _step?;
     value?: string;
+    private _inputValue?;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist-cms/packages/property-editors/date-picker/property-editor-ui-date-picker.element.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbPropertyValueChangeEvent } from '../../core/property-editor/index.js';
-import { html, customElement, property, state, ifDefined } from '../../../external/lit/index.js';
+import { html, customElement, property, state } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
 /**
  * This property editor allows the user to pick a date, datetime-local, or time.
@@ -37,8 +37,8 @@ let UmbPropertyEditorUIDatePickerElement = class UmbPropertyEditorUIDatePickerEl
             return;
         // Format string prevalue/config
         const format = config.getValueByAlias('format');
-        const hasTime = format?.includes('H') || format?.includes('m');
-        const hasSeconds = format?.includes('s');
+        const hasTime = (format?.includes('H') || format?.includes('m')) ?? false;
+        const hasSeconds = format?.includes('s') ?? false;
         this._inputType = hasTime ? 'datetime-local' : 'date';
         // Based on the type of format string change the UUI-input type
         // Note: The format string is not validated, so it's possible to have an invalid format string,
@@ -56,28 +56,47 @@ let UmbPropertyEditorUIDatePickerElement = class UmbPropertyEditorUIDatePickerEl
         }
     }
     #onChange(event) {
-        this.#formatValue(event.target.value.toString());
+        let value = event.target.value.toString();
+        switch (this._inputType) {
+            case 'time':
+                value = `0001-01-01 ${value}`;
+                break;
+            case 'date':
+                value = `${value} 00:00:00`;
+                break;
+            case 'datetime-local':
+                value = value.replace('T', ' ');
+                break;
+        }
+        this.#syncValue(value);
     }
     /**
      * Formats the value depending on the input type.
      */
     #formatValue(value) {
-        // Check that the value is a valid date
-        const valueToDate = new Date(value);
-        if (isNaN(valueToDate.getTime())) {
-            console.warn('[Umbraco.DatePicker] The value is not a valid date.', value);
+        this._inputValue = undefined;
+        if (isNaN(new Date(value).getTime())) {
+            console.warn(`[UmbDatePicker] Invalid date: ${value}`);
             return;
         }
-        // Replace the potential time demoninator 'T' with a whitespace for backwards compatibility
-        value = value.replace('T', ' ');
-        // If the inputType is 'date', we need to make sure the value doesn't have a time
-        if (this._inputType === 'date' && value.includes(' ')) {
-            value = value.split(' ')[0];
+        const dateSplit = value.split(' ');
+        if (dateSplit.length !== 2) {
+            console.warn(`[UmbDatePicker] Invalid date: ${value}`);
+            return;
         }
-        // If the inputType is 'time', we need to remove the date part of the value
-        if (this._inputType === 'time' && value.includes(' ')) {
-            value = value.split(' ')[1];
+        switch (this._inputType) {
+            case 'time':
+                this._inputValue = dateSplit[1];
+                break;
+            case 'date':
+                this._inputValue = dateSplit[0];
+                break;
+            default:
+                this._inputValue = dateSplit.join('T');
+                break;
         }
+    }
+    #syncValue(value) {
         const valueHasChanged = this.value !== value;
         if (valueHasChanged) {
             this.value = value;
@@ -87,7 +106,7 @@ let UmbPropertyEditorUIDatePickerElement = class UmbPropertyEditorUIDatePickerEl
     render() {
         return html `
 			<umb-input-date
-				value="${ifDefined(this.value)}"
+				.value=${this._inputValue}
 				.min=${this._min}
 				.max=${this._max}
 				.step=${this._step}
@@ -112,6 +131,9 @@ __decorate([
 __decorate([
     property()
 ], UmbPropertyEditorUIDatePickerElement.prototype, "value", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIDatePickerElement.prototype, "_inputValue", void 0);
 UmbPropertyEditorUIDatePickerElement = __decorate([
     customElement('umb-property-editor-ui-date-picker')
 ], UmbPropertyEditorUIDatePickerElement);