fix: fixed date fields prefilling with wrong dates in some timezones

src/modules/new-request-form/fields/DatePicker.tsx

@@ -9,7 +9,7 @@ import {
 import { Span } from "@zendeskgarden/react-typography";
 import type { Field } from "../data-types";
 import type { ChangeEventHandler } from "react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 interface DatePickerProps {
   field: Field;
@@ -29,7 +29,26 @@ export function DatePicker({
     value ? new Date(value as string) : undefined
   );
 
-  const formatDate = (value: Date | undefined) => {
+  const dateTimeFormat = useMemo(
+    () =>
+      new Intl.DateTimeFormat(locale, {
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+        timeZone: "UTC",
+      }),
+    [locale]
+  );
+
+  /* Formats the date using the UTC time zone to prevent timezone-related issues.
+   * By creating a new Date object with only the date, the time defaults to 00:00:00 UTC.
+   * This avoids date shifts that can occur if formatted with the local time zone, as Garden does by default.
+   */
+  const formatDateInput = (date: Date) => {
+    return dateTimeFormat.format(date);
+  };
+
+  const formatDateValue = (value: Date | undefined) => {
     if (value === undefined) {
       return "";
     }
@@ -43,7 +62,7 @@ export function DatePicker({
       Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0)
     ) as Date;
     setDate(newDate);
-    const dateString = formatDate(newDate);
+    const dateString = formatDateValue(newDate);
     if (dateString !== undefined) {
       onChange(dateString);
     }
@@ -66,7 +85,12 @@ export function DatePicker({
       {description && (
         <Hint dangerouslySetInnerHTML={{ __html: description }} />
       )}
-      <GardenDatepicker value={date} onChange={handleChange} locale={locale}>
+      <GardenDatepicker
+        value={date}
+        onChange={handleChange}
+        formatDate={formatDateInput}
+        locale={locale}
+      >
         <Input
           required={required}
           lang={locale}
@@ -75,7 +99,7 @@ export function DatePicker({
         />
       </GardenDatepicker>
       {error && <Message validation="error">{error}</Message>}
-      <input type="hidden" name={name} value={formatDate(date)} />
+      <input type="hidden" name={name} value={formatDateValue(date)} />
     </GardenField>
   );
 }