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

Compare commits

base: tp-elements:2.0.2
Branches Tags
tp-elements:master
tp-elements:2.1.1 tp-elements:2.0.2 tp-elements:2.0.1 tp-elements:2.0.0 tp-elements:1.1.1 tp-elements:1.0.0
..
compare: tp-elements:2.1.1
Branches Tags
tp-elements:master
tp-elements:2.1.1 tp-elements:2.0.2 tp-elements:2.0.1 tp-elements:2.0.0 tp-elements:1.1.1 tp-elements:1.0.0

4 Commits
2.0.2 ... 2.1.1

Author SHA1 Message Date
pk
e189cb3b73 Bump version 2026-04-10 09:52:57 +02:00
pk
8f14196418 Make sure component always returns midnight utc 2026-04-10 09:52:43 +02:00
pk
acf1728cb9 timeZone property sets timezone for display. Value is always expected to be UTC (in- and outbound) 2026-03-24 11:56:00 +01:00
pk
722e674526 Make sure value is always UTC and timeZone is applied to the user input if provided. 2026-03-24 11:45:09 +01:00
2 changed files with 14 additions and 11 deletions
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.2", "version": "2.1.1",
"description": "", "description": "",
"main": "tp-date-input.js", "main": "tp-date-input.js",
"scripts": { "scripts": {

21
tp-date-input.js
View File

@@ -292,7 +292,7 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) {
} }
// Convert luxon format to match input assignment // Convert luxon format to match input assignment
const luxonFormat = this._inputAssign.map(part => { const format = this._inputAssign.map(part => {
switch (part) { switch (part) {
case 'MM': return 'LL'; case 'MM': return 'LL';
case 'dd': return 'dd'; case 'dd': return 'dd';
@@ -301,17 +301,18 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) {
} }
}).join('-'); }).join('-');
const dt = DateTime.fromFormat(i0 + '-' + i1 + '-' + i2, luxonFormat); // Parse the entered values as a plain calendar date, then store as UTC midnight.
// Date-only fields are timezone-agnostic — April 7 means April 7 for everyone.
const dt = DateTime.fromFormat(i0 + '-' + i1 + '-' + i2, format);
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;
// Convert to specified timezone or use system timezone const utcMidnight = DateTime.utc(dt.year, dt.month, dt.day);
const finalDt = this.timeZone ? dt.setZone(this.timeZone) : dt; this.date = utcMidnight.toJSDate();
this.date = finalDt.toJSDate(); this.value = utcMidnight.toISO();
this.value = finalDt.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 {
@@ -465,9 +466,10 @@ 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 luxon format parts to match display format // Values are stored as UTC midnight — display the UTC calendar date as-is.
dt = dt.toUTC();
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]));
this._input2 = dt.toFormat(this._getLuxonFormat(this._inputAssign[2])); this._input2 = dt.toFormat(this._getLuxonFormat(this._inputAssign[2]));
@@ -488,7 +490,8 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) {
if (this.today) { if (this.today) {
setTimeout(() => { setTimeout(() => {
if (!this.value) { if (!this.value) {
this.value = DateTime.now().toISO(); const now = DateTime.utc();
this.value = DateTime.utc(now.year, now.month, now.day).toISO();
} }
}); });
} }