Make the datepicker UTC only and use the UTC helper package by date-fns

package-lock.json

@@ -0,0 +1,86 @@
+{
+  "name": "@tp/tp-date-picker",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@tp/tp-date-picker",
+      "version": "1.0.0",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@date-fns/utc": "^2.1.0",
+        "date-fns": "^4.0.0",
+        "lit": "^2.2.0"
+      }
+    },
+    "node_modules/@date-fns/utc": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@date-fns/utc/-/utc-2.1.0.tgz",
+      "integrity": "sha512-176grgAgU2U303rD2/vcOmNg0kGPbhzckuH1TEP2al7n0AQipZIy9P15usd2TKQCG1g+E1jX/ZVQSzs4sUDwgA==",
+      "license": "MIT"
+    },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz",
+      "integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
+      "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT"
+    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/lit": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
+      "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^1.6.0",
+        "lit-element": "^3.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
+      "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.1.0",
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
+      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    }
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-date-picker",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "main": "tp-date-picker.js",
   "scripts": {
@@ -13,8 +13,8 @@
   "author": "trading_peter",
   "license": "Apache-2.0",
   "dependencies": {
-    "date-fns": "^2.28.0",
+    "@date-fns/utc": "^2.1.0",
-    "date-fns-tz": "^1.3.3",
+    "date-fns": "^4.0.0",
     "lit": "^2.2.0"
   }
 }

tp-date-picker.js

@@ -7,7 +7,7 @@ This program is available under Apache License Version 2.0
 import '@tp/tp-icon/tp-icon.js';
 import { FormElement } from '@tp/helpers/form-element';
 import { LitElement, html, css, svg } from 'lit';
-import { zonedTimeToUtc } from 'date-fns-tz';
+import { UTCDate } from '@date-fns/utc';
 
 class TpDatePicker extends FormElement(LitElement) {
   static get styles() {
@@ -121,7 +121,7 @@ class TpDatePicker extends FormElement(LitElement) {
   render() {
     let { month, year, dayNames, value, yearsForward, yearsBackwards } = this;
 
-    const today = new Date();
+    const today = new UTCDate();
 
     if ((!month && month !== 0) || (!year && year !== 0)) {
       month = today.getMonth();
@@ -180,7 +180,6 @@ class TpDatePicker extends FormElement(LitElement) {
       year: { type: Number },
       monthNames: { type: Array },
       dayNames: { type: Array },
-      timeZone: { type: String },
       yearsForward: { type: Number },
       yearsBackwards: { type: Number },
       showYearSelector: { type: Boolean },
@@ -202,7 +201,7 @@ class TpDatePicker extends FormElement(LitElement) {
   constructor() {
     super();
 
-    this.today = new Date();
+    this.today = new UTCDate();
     this.month = this.today.getMonth();
     this.year = this.today.getFullYear();
     this.yearsForward = 10;
@@ -251,7 +250,7 @@ class TpDatePicker extends FormElement(LitElement) {
   selectDate(e) {
     for (const el of e.composedPath()) {
       if (el.date !== undefined) {
-        this.value = this.timeZone ? zonedTimeToUtc(el.date, this.timeZone) : el.date;
+        this.value = el.date;
         this.dispatchEvent(new CustomEvent('value-changed', { detail: this.value, bubbles: true, composed: true }));
         return;
       }
@@ -293,10 +292,10 @@ class TpDatePicker extends FormElement(LitElement) {
   }
 
   getMonthDates(month = null, year = null) {
-    month = month !== null ? month : new Date().getMonth();
+    month = month !== null ? month : new UTCDate().getMonth();
-    year = year || new Date().getFullYear();
+    year = year || new UTCDate().getFullYear();
 
-    const firstOfMonth = new Date();
+    const firstOfMonth = new UTCDate();
     firstOfMonth.setFullYear(year);
     firstOfMonth.setMonth(month);
     firstOfMonth.setDate(1);
@@ -304,7 +303,7 @@ class TpDatePicker extends FormElement(LitElement) {
     firstOfMonth.setMinutes(0);
     firstOfMonth.setSeconds(0);
 
-    const lastOfMonth = new Date();
+    const lastOfMonth = new UTCDate();
     lastOfMonth.setDate(1);
     lastOfMonth.setFullYear(year);
     lastOfMonth.setMonth(month + 1);
@@ -317,13 +316,13 @@ class TpDatePicker extends FormElement(LitElement) {
 
     while (firstOfMonth.getDay() > 1) {
       firstOfMonth.setDate(firstOfMonth.getDate() - 1);
-      dates.push(new Date(firstOfMonth));
+      dates.push(new UTCDate(firstOfMonth));
     }
 
     dates.reverse();
 
     for (let i = 1; i <= lastOfMonth.getDate(); ++i) {
-      const d = new Date();
+      const d = new UTCDate();
       d.setFullYear(year);
       d.setMonth(month);
       d.setDate(i);
@@ -336,7 +335,7 @@ class TpDatePicker extends FormElement(LitElement) {
     // Make sure we always fill 42 date get guarantee equal size of the date picker.
     while (dates.length < 42) {
       lastOfMonth.setDate(lastOfMonth.getDate() + 1);
-      dates.push(new Date(lastOfMonth));
+      dates.push(new UTCDate(lastOfMonth));
     }
 
     return dates;