From bb638c7e8a1e328e8562098443c026a4180c3b70 Mon Sep 17 00:00:00 2001 From: pk Date: Thu, 2 Jan 2025 22:15:04 +0100 Subject: [PATCH] Make the datepicker UTC only and use the UTC helper package by date-fns --- package-lock.json | 86 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 6 ++-- tp-date-picker.js | 23 ++++++------- 3 files changed, 100 insertions(+), 15 deletions(-) create mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..7b7d355 --- /dev/null +++ b/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" + } + } + } +} diff --git a/package.json b/package.json index b4633b1..e1b9cfd 100644 --- a/package.json +++ b/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-tz": "^1.3.3", + "@date-fns/utc": "^2.1.0", + "date-fns": "^4.0.0", "lit": "^2.2.0" } } diff --git a/tp-date-picker.js b/tp-date-picker.js index 7c941fe..3f1e49a 100644 --- a/tp-date-picker.js +++ b/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(); - year = year || new Date().getFullYear(); + month = month !== null ? month : new UTCDate().getMonth(); + 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;