tp-elements/tp-date-input
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

timeZone property sets timezone for display. Value is always expected to be UTC (in- and outbound)

Browse Source
This commit is contained in:
trading_peter
2026-03-24 11:56:00 +01:00
parent 722e674526
commit acf1728cb9
2 changed files with 12 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@tp/tp-date-input", "name": "@tp/tp-date-input",
"version": "2.0.3", "version": "2.1.0",
"description": "", "description": "",
"main": "tp-date-input.js", "main": "tp-date-input.js",
"scripts": { "scripts": {

25
tp-date-input.js
View File

@@ -301,25 +301,17 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) {
} }
}).join('-'); }).join('-');
const dt = DateTime.fromFormat(i0 + '-' + i1 + '-' + i2, luxonFormat); // Parse the date in the specified timezone (or local if not set).
// This interprets the entered values as being in that timezone.
const dt = DateTime.fromFormat(i0 + '-' + i1 + '-' + i2, luxonFormat, { zone: this.timeZone || 'local' });
if (dt.isValid) { if (dt.isValid) {
this.inputs[0].invalid = false; this.inputs[0].invalid = false;
this.inputs[1].invalid = false; this.inputs[1].invalid = false;
this.inputs[2].invalid = false; this.inputs[2].invalid = false;
// If timeZone is specified, interpret the entered date values as being in that timezone this.date = dt.toJSDate();
// and output as UTC. This ensures filters work correctly against UTC-stored dates. this.value = dt.toUTC().toISO();
let finalDt;
if (this.timeZone) {
// keepLocalTime: true interprets the entered values as being in the specified timezone
finalDt = this.timeZone ? dt.setZone(this.timeZone, { keepLocalTime: true }) : dt;
} else {
finalDt = dt;
}
this.date = finalDt.toJSDate();
this.value = finalDt.toUTC().toISO();
this.invalid = false; this.invalid = false;
this.dispatchEvent(new CustomEvent('value-changed', { detail: this.value, bubbles: true, composed: true })); this.dispatchEvent(new CustomEvent('value-changed', { detail: this.value, bubbles: true, composed: true }));
} else { } else {
@@ -473,8 +465,13 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) {
return; return;
} }
const dt = this._toDateTime(this.value); let dt = this._toDateTime(this.value);
if (dt && dt.isValid) { if (dt && dt.isValid) {
// Convert to user's timezone for display (input values are expected to be UTC)
if (this.timeZone) {
dt = dt.setZone(this.timeZone);
}
// Convert luxon format parts to match display format // Convert luxon format parts to match display format
this._input0 = dt.toFormat(this._getLuxonFormat(this._inputAssign[0])); this._input0 = dt.toFormat(this._getLuxonFormat(this._inputAssign[0]));
this._input1 = dt.toFormat(this._getLuxonFormat(this._inputAssign[1])); this._input1 = dt.toFormat(this._getLuxonFormat(this._inputAssign[1]));