yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ensure that the datetime property editor treats the datetime strings as raw, i.e. do not assume anything about timezone and such

Browse Source
This commit is contained in:
Jacob Overgaard
2024-05-03 11:02:53 +02:00
parent 70a465c577
commit bb38bf318e
1 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/Umbraco.Web.UI.Client/src/packages/property-editors/date-picker/property-editor-ui-date-picker.element.ts
View File

@@ -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>
`;