Skip to content

Commit f97d55e

Browse files
matt-aitkenericallam
authored andcommitted
Timezone fix: wrong month in Usage page dropdown
1 parent 4070c6a commit f97d55e

File tree

2 files changed

+21
-6
lines changed

2 files changed

+21
-6
lines changed

apps/webapp/app/components/primitives/DateField.tsx

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,19 +53,20 @@ export function DateField({
5353
variant = "small",
5454
}: DateFieldProps) {
5555
const [value, setValue] = useState<undefined | CalendarDateTime>(
56-
utcDateToCalendarDate(defaultValue)
56+
dateToCalendarDate(defaultValue)
5757
);
5858

5959
const state = useDateFieldState({
6060
value: value,
6161
onChange: (value) => {
6262
if (value) {
6363
setValue(value);
64-
onValueChange?.(value.toDate("utc"));
64+
const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
65+
onValueChange?.(value.toDate(timeZone));
6566
}
6667
},
67-
minValue: utcDateToCalendarDate(minValue),
68-
maxValue: utcDateToCalendarDate(maxValue),
68+
minValue: dateToCalendarDate(minValue),
69+
maxValue: dateToCalendarDate(maxValue),
6970
shouldForceLeadingZeros: true,
7071
granularity,
7172
locale: "en-US",
@@ -78,7 +79,7 @@ export function DateField({
7879
useEffect(() => {
7980
if (state.value === undefined && defaultValue === undefined) return;
8081

81-
const calendarDate = utcDateToCalendarDate(defaultValue);
82+
const calendarDate = dateToCalendarDate(defaultValue);
8283
//unchanged
8384
if (state.value?.toDate("utc").getTime() === defaultValue?.getTime()) {
8485
return;
@@ -136,7 +137,7 @@ export function DateField({
136137
variant={variants[variant].nowButtonVariant}
137138
onClick={() => {
138139
const now = new Date();
139-
setValue(utcDateToCalendarDate(new Date()));
140+
setValue(dateToCalendarDate(new Date()));
140141
onValueChange?.(now);
141142
}}
142143
>
@@ -186,6 +187,19 @@ function utcDateToCalendarDate(date?: Date) {
186187
: undefined;
187188
}
188189

190+
function dateToCalendarDate(date?: Date) {
191+
return date
192+
? new CalendarDateTime(
193+
date.getFullYear(),
194+
date.getMonth() + 1,
195+
date.getDate(),
196+
date.getHours(),
197+
date.getMinutes(),
198+
date.getSeconds()
199+
)
200+
: undefined;
201+
}
202+
189203
type DateSegmentProps = {
190204
segment: DateSegment;
191205
state: DateFieldState;

apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
8787
const monthDateFormatter = new Intl.DateTimeFormat("en-US", {
8888
month: "long",
8989
year: "numeric",
90+
timeZone: "utc",
9091
});
9192

9293
export default function Page() {

0 commit comments

Comments
 (0)