From 9fc38c42e82119e56728f3efd03c878e2f03b56b Mon Sep 17 00:00:00 2001 From: pk Date: Fri, 27 Jun 2025 10:29:11 +0200 Subject: [PATCH] Migrate to luxon --- package.json | 2 +- tp-date-input.js | 57 +++++++++++++++++++++++++++++++----------------- 2 files changed, 38 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 1a3ddda..7af67ef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tp/tp-date-input", - "version": "1.1.1", + "version": "2.0.0", "description": "", "main": "tp-date-input.js", "scripts": { diff --git a/tp-date-input.js b/tp-date-input.js index 678a0f6..3b5e3e5 100644 --- a/tp-date-input.js +++ b/tp-date-input.js @@ -1,6 +1,6 @@ /** @license -Copyright (c) 2022 trading_peter +Copyright (c) 2025 trading_peter This program is available under Apache License Version 2.0 */ @@ -9,8 +9,7 @@ import { ControlState } from '@tp/helpers/control-state.js'; import { EventHelpers } from '@tp/helpers/event-helpers.js'; import { FormElement } from '@tp/helpers/form-element.js'; import { LitElement, html, css } from 'lit'; -import { format, parse, parseISO, isAfter, isValid, endOfDay } from 'date-fns/esm'; -import { zonedTimeToUtc } from 'date-fns-tz'; +import { DateTime } from 'luxon'; import { closest } from '@tp/helpers'; class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) { @@ -232,14 +231,14 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) { * of the control, like allowedDates, maxDate, ... */ dateValid(date, maxDate = this.maxDate, allowedDates = this.allowedDates) { - date = this._toDate(date); + const dt = this._toDateTime(date); - if (isValid(date) === false) { + if (!dt || !dt.isValid) { return false; } if ((allowedDates.length > 0 && allowedDates.indexOf(date) === -1) || - (maxDate && isAfter(date, maxDate))) { + (maxDate && dt > this._toDateTime(maxDate))) { return false; } return true; @@ -294,12 +293,15 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) { const date = parse(i0 + '-' + i1 + '-' + i2, this._inputAssign.join('-'), new Date()); - if (isValid(date)) { + if (dt.isValid) { this.inputs[0].invalid = false; this.inputs[1].invalid = false; this.inputs[2].invalid = false; - this.date = this.timeZone ? zonedTimeToUtc(date, this.timeZone) : date; - this.value = this.date.toISOString(); + + // Convert to specified timezone or use system timezone + const finalDt = this.timeZone ? dt.setZone(this.timeZone) : dt; + this.date = finalDt.toJSDate(); + this.value = finalDt.toISO(); this.invalid = false; this.dispatchEvent(new CustomEvent('value-changed', { detail: this.value, bubbles: true, composed: true })); } else { @@ -453,18 +455,30 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) { return; } - const date = this._toDate(this.value); - this._input0 = format(date, this._inputAssign[0]); - this._input1 = format(date, this._inputAssign[1]); - this._input2 = format(date, this._inputAssign[2]); - this.date = date; + const dt = this._toDateTime(this.value); + if (dt && dt.isValid) { + // 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])); + this._input2 = dt.toFormat(this._getLuxonFormat(this._inputAssign[2])); + this.date = dt.toJSDate(); + } + } + + _getLuxonFormat(inputFormat) { + switch (inputFormat) { + case 'MM': return 'LL'; + case 'dd': return 'dd'; + case 'y': return 'yyyy'; + default: return inputFormat; + } } _setToday() { if (this.today) { setTimeout(() => { if (!this.value) { - this.value = new Date().toISOString(); + this.value = DateTime.now().toISO(); } }); } @@ -473,9 +487,9 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) { _getMaxDate(maxDate) { if (typeof maxDate !== 'string') return null; if (maxDate.toLowerCase() === 'today') { - return endOfDay(new Date()); + return DateTime.now().endOf('day'); } - return this._toDate(maxDate); + return this._toDateTime(maxDate); } _autoMoveCursor(e) { @@ -486,12 +500,15 @@ class TpDateInput extends EventHelpers(ControlState(FormElement(LitElement))) { } } - _toDate(value) { + _toDateTime(value) { if (typeof value === 'string') { - return parseISO(value); - } else { + return DateTime.fromISO(value); + } else if (value instanceof Date) { + return DateTime.fromJSDate(value); + } else if (value && typeof value === 'object' && value.isLuxonDateTime) { return value; } + return null; } }