From acf1728cb9ff03a183b46845b8d3ddc5cccde994 Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Tue, 24 Mar 2026 11:56:00 +0100
Subject: [PATCH] timeZone property sets timezone for display. Value is always
 expected to be UTC (in- and outbound)

---
 package.json     |  2 +-
 tp-date-input.js | 25 +++++++++++--------------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index d83c2b9..4bc7774 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-date-input",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "",
   "main": "tp-date-input.js",
   "scripts": {
diff --git a/tp-date-input.js b/tp-date-input.js
index 894a9cb..65e6830 100644
--- a/tp-date-input.js
+++ b/tp-date-input.js
@@ -301,25 +301,17 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) {
       }
     }).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) {
       this.inputs[0].invalid = false;
       this.inputs[1].invalid = false;
       this.inputs[2].invalid = false;
       
-      // If timeZone is specified, interpret the entered date values as being in that timezone
-      // and output as UTC. This ensures filters work correctly against UTC-stored dates.
-      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.date = dt.toJSDate();
+      this.value = dt.toUTC().toISO();
       this.invalid = false;
       this.dispatchEvent(new CustomEvent('value-changed', { detail: this.value, bubbles: true, composed: true }));
     } else {
@@ -473,8 +465,13 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) {
       return;
     }
 
-    const dt = this._toDateTime(this.value);
+    let dt = this._toDateTime(this.value);
     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
       this._input0 = dt.toFormat(this._getLuxonFormat(this._inputAssign[0]));
       this._input1 = dt.toFormat(this._getLuxonFormat(this._inputAssign[1]));