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

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

Browse Source
This commit is contained in:
trading_peter
2025-01-02 22:15:04 +01:00
parent 5b881b7971
commit bb638c7e8a
3 changed files with 100 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
tp-date-picker.js
View File

@ -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;