timtinkers.online
this repo has no description
Deploy UTC time zone fix??
+68
-11
+68
-11
islands/WeekPicker.tsx
+68
-11
islands/WeekPicker.tsx
···
1
1
import { useEffect, useRef, useState } from "preact/hooks";
2
2
import { IS_BROWSER } from "$fresh/runtime.ts";
3
-
import startOfMonth from "https://deno.land/x/date_fns@v2.22.1/startOfMonth/index.ts";
4
-
import startOfWeek from "https://deno.land/x/date_fns@v2.22.1/startOfWeek/index.ts";
5
3
import addMonths from "https://deno.land/x/date_fns@v2.22.1/addMonths/index.ts";
6
4
import format from "https://deno.land/x/date_fns@v2.22.1/format/index.js";
7
5
import subMonths from "https://deno.land/x/date_fns@v2.22.1/subMonths/index.ts";
···
33
31
);
34
32
35
33
if (onWeekChange) {
36
-
onWeekChange(weekDates[0], weekDates[6]);
34
+
// Ensure we're passing UTC-normalized dates to avoid timezone issues
35
+
onWeekChange(
36
+
createUTCDate(weekDates[0]),
37
+
createUTCDate(weekDates[6]),
38
+
);
37
39
}
38
40
} else {
39
41
// Set to current week if no default provided
···
45
47
);
46
48
47
49
if (onWeekChange) {
48
-
onWeekChange(weekDates[0], weekDates[6]);
50
+
// Ensure we're passing UTC-normalized dates to avoid timezone issues
51
+
onWeekChange(
52
+
createUTCDate(weekDates[0]),
53
+
createUTCDate(weekDates[6]),
54
+
);
49
55
}
50
56
}
51
57
}, []);
52
58
59
+
// Create a UTC date with the same year, month, day as the input date
60
+
// This ensures the date is not shifted due to local timezone
61
+
const createUTCDate = (date: Date): Date => {
62
+
const utcDate = new Date(Date.UTC(
63
+
date.getFullYear(),
64
+
date.getMonth(),
65
+
date.getDate(),
66
+
0,
67
+
0,
68
+
0,
69
+
0,
70
+
));
71
+
return utcDate;
72
+
};
73
+
53
74
const generateWeekDates = (baseDate: Date): Date[] => {
54
75
const dates: Date[] = [];
55
-
// Use date-fns to get the Monday of the week in UTC
56
-
const weekStart = startOfWeek(baseDate, { weekStartsOn: 1 });
76
+
77
+
// Create a fresh Date object to avoid any timezone shifts
78
+
const baseDateClone = new Date(baseDate);
57
79
80
+
// Get the day of week (0 = Sunday, 1 = Monday, etc.)
81
+
const dayOfWeek = baseDateClone.getDay();
82
+
83
+
// Calculate how many days to subtract to get to Monday
84
+
const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
85
+
86
+
// Set to Monday
87
+
const weekStart = new Date(baseDateClone);
88
+
weekStart.setDate(baseDateClone.getDate() - daysToSubtract);
89
+
90
+
// Ensure the time component is zeroed out
91
+
weekStart.setHours(0, 0, 0, 0);
92
+
93
+
// Generate the 7 days of the week
58
94
for (let i = 0; i < 7; i++) {
59
95
const date = new Date(weekStart);
60
-
date.setUTCDate(weekStart.getUTCDate() + i);
96
+
date.setDate(weekStart.getDate() + i);
61
97
dates.push(date);
62
98
}
63
99
···
80
116
);
81
117
82
118
if (onWeekChange) {
83
-
onWeekChange(weekDates[0], weekDates[6]);
119
+
// Ensure we're passing UTC-normalized dates to avoid timezone issues
120
+
onWeekChange(
121
+
createUTCDate(weekDates[0]),
122
+
createUTCDate(weekDates[6]),
123
+
);
84
124
}
85
125
}
86
126
···
299
339
const month = date.getMonth();
300
340
301
341
// First day of the month
302
-
const firstDay = startOfMonth(new Date(year, month, 1));
342
+
const firstDay = new Date(year, month, 1);
303
343
304
344
const days: Date[] = [];
305
345
···
325
365
const startOfWeek = selectedDates[0];
326
366
const endOfWeek = selectedDates[6];
327
367
368
+
// Compare only the date parts, ignoring time
369
+
const dateOnly = new Date(
370
+
date.getFullYear(),
371
+
date.getMonth(),
372
+
date.getDate(),
373
+
);
374
+
const startOnly = new Date(
375
+
startOfWeek.getFullYear(),
376
+
startOfWeek.getMonth(),
377
+
startOfWeek.getDate(),
378
+
);
379
+
const endOnly = new Date(
380
+
endOfWeek.getFullYear(),
381
+
endOfWeek.getMonth(),
382
+
endOfWeek.getDate(),
383
+
);
384
+
328
385
return (
329
-
date.getTime() >= startOfWeek.getTime() &&
330
-
date.getTime() <= endOfWeek.getTime()
386
+
dateOnly >= startOnly &&
387
+
dateOnly <= endOnly
331
388
);
332
389
}
333
390
}