fix(ui): timezone issue related to date only fields in Pacific timezones (#11203)

Fixes #10962

This fix addresses fields with timezones enabled specifically for not
time pickers. If all you want to do is pick a date such as 14th Feb, it
would store the incorrect version and display a date in the future for
people in the Pacific.

This is because Auckland is +12 offset, but +13 with Daylight Savings
Time. In our date picker we try to normalise date pickers with no time
to 12pm and so half the year we ended up pushing dates visually to the
next day for people in the pacific only. Other regions were not affected
by this because their offset would be less than 12.

This PR fixes this by ensuring that our dates are always normalised to
selected timezone's 12pm date to UTC.

There's also additional tests for these two fields from 3 main locations
to cover a wider range of possible timezones.

Author: paulpopus

docs/fields/date.mdx

@@ -242,4 +242,6 @@ You can customise the available list of timezones in the [global admin config](.
 <Banner type='info'>
   **Good to know:**
   The date itself will be stored in UTC so it's up to you to handle the conversion to the user's timezone when displaying the date in your frontend.
+
+  Dates without a specific time are normalised to 12:00 in the selected timezone.
 </Banner>

packages/ui/src/fields/DateTime/index.tsx

@@ -38,6 +38,8 @@ const DateTimeFieldComponent: DateFieldClientComponent = (props) => {
     validate,
   } = props
 
+  const pickerAppearance = datePickerProps?.pickerAppearance || 'default'
+
   // Get the user timezone so we can adjust the displayed value against it
   const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
 
@@ -59,15 +61,19 @@ const DateTimeFieldComponent: DateFieldClientComponent = (props) => {
     setValue,
     showError,
     value,
-  } = useField<Date>({
+  } = useField<string>({
     path,
     validate: memoizedValidate,
   })
 
   const timezonePath = path + '_tz'
   const timezoneField = useFormFields(([fields, _]) => fields?.[timezonePath])
   const supportedTimezones = config.admin.timezones.supportedTimezones
-
+  /**
+   * Date appearance doesn't include timestamps,
+   * which means we need to pin the time to always 12:00 for the selected date
+   */
+  const isDateOnly = ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)
   const selectedTimezone = timezoneField?.value as string
 
   // The displayed value should be the original value, adjusted to the user's timezone
@@ -99,15 +105,28 @@ const DateTimeFieldComponent: DateFieldClientComponent = (props) => {
       if (!readOnly) {
         if (timezone && selectedTimezone && incomingDate) {
           // Create TZDate instances for the selected timezone
-          const tzDateWithUTC = TZDate.tz(selectedTimezone)
-
-          // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor
-          const dateToUserTz = new TZDate(incomingDate)
-
-          // Transpose the date to the selected timezone
-          const dateWithTimezone = transpose(dateToUserTz, tzDateWithUTC)
-
-          setValue(dateWithTimezone.toISOString() || null)
+          const TZDateWithSelectedTz = TZDate.tz(selectedTimezone)
+
+          if (isDateOnly) {
+            // We need to offset this hardcoded hour offset from the DatePicker elemenent
+            // this can be removed in 4.0 when we remove the hardcoded offset as it is a breaking change
+            // const tzOffset = incomingDate.getTimezoneOffset() / 60
+            const incomingOffset = incomingDate.getTimezoneOffset() / 60
+            const originalHour = incomingDate.getHours() + incomingOffset
+            incomingDate.setHours(originalHour)
+
+            // Convert the original date as picked into the desired timezone.
+            const dateToSelectedTz = transpose(incomingDate, TZDateWithSelectedTz)
+
+            setValue(dateToSelectedTz.toISOString() || null)
+          } else {
+            // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor
+            const dateToUserTz = new TZDate(incomingDate)
+            // Transpose the date to the selected timezone
+            const dateWithTimezone = transpose(dateToUserTz, TZDateWithSelectedTz)
+
+            setValue(dateWithTimezone.toISOString() || null)
+          }
         } else {
           setValue(incomingDate?.toISOString() || null)
         }
@@ -173,7 +192,6 @@ const DateTimeFieldComponent: DateFieldClientComponent = (props) => {
             selectedTimezone={selectedTimezone}
           />
         )}
-
         {AfterInput}
       </div>
       <RenderCustomComponent