feat: add "local time" default option to TimezonepickerInput (#1969)

Author: alecpm

cypress/component/date/DateEditor.spec.tsx

@@ -63,18 +63,6 @@ const getTodayKebabString = () => {
   return `${getToday().year}-${month}-${date}`;
 };
 
-const getTimezoneOffsetString = () => {
-  const currentDate = new Date();
-  const offsetInMinutes = currentDate.getTimezoneOffset();
-  const offsetHours = Math.floor(Math.abs(offsetInMinutes) / 60);
-  const offsetMinutes = Math.abs(offsetInMinutes) % 60;
-  const offsetSign = offsetInMinutes <= 0 ? '+' : '-';
-
-  return `${offsetSign}${offsetHours.toString().padStart(2, '0')}:${offsetMinutes
-    .toString()
-    .padStart(2, '0')}`;
-};
-
 type Parameters = ParametersAPI & {
   instance: {
     format: DateTimeFormat;
@@ -93,7 +81,7 @@ const setupDateEditor = ({
 }) => {
   const [fieldSdk] = createFakeFieldAPI(undefined, initialValue);
   mount(
-    <DateEditor field={fieldSdk} isInitiallyDisabled={initiallyDisabled} parameters={parameters} />
+    <DateEditor field={fieldSdk} isInitiallyDisabled={initiallyDisabled} parameters={parameters} />,
   );
   return fieldSdk;
 };
@@ -130,10 +118,7 @@ describe('Date Editor', () => {
         .should('have.attr', 'placeholder', '00:00')
         .should('have.value', '00:00');
 
-      selectors
-        .getTimezoneInput()
-        .should('be.visible')
-        .should('have.value', getTimezoneOffsetString());
+      selectors.getTimezoneInput().should('be.visible').should('have.value', 'Local time');
     });
 
     it('calendar should show current year, month and date', () => {
@@ -173,7 +158,7 @@ describe('Date Editor', () => {
       selectors.getDateInput().should('have.value', '');
       selectors.getTimeInput().should('have.value', '00:00');
 
-      selectors.getTimezoneInput().should('have.value', getTimezoneOffsetString());
+      selectors.getTimezoneInput().should('have.value', 'Local time');
       selectors.getClearBtn().should('not.exist');
     });
 

packages/date/src/TimezonePickerInput.tsx

@@ -4,7 +4,6 @@ import { Select } from '@contentful/f36-components';
 
 import { zoneOffsets, defaultZoneOffset } from './utils/zoneOffsets';
 
-
 export type TimezonepickerProps = {
   disabled: boolean;
   onChange: (value: string) => void;
@@ -23,10 +22,11 @@ export const TimezonepickerInput = ({
       isDisabled={disabled}
       onChange={(e: ChangeEvent<HTMLSelectElement>) => {
         onChange(e.currentTarget.value);
-      }}>
+      }}
+    >
       {zoneOffsets.map((offset) => (
         <Select.Option key={offset} value={offset}>
-          UTC{offset}
+          {offset === defaultZoneOffset ? offset : `UTC${offset}`}
         </Select.Option>
       ))}
     </Select>

packages/date/src/utils/date.ts

@@ -1,13 +1,10 @@
 // eslint-disable-next-line -- TODO: move to date-fns
 import moment from 'moment';
 import { TimeResult } from '../types';
+import { defaultZoneOffset } from './zoneOffsets';
 
 const ZONE_RX = /(Z|[+-]\d{2}[:+]?\d{2})$/;
 
-function startOfToday(format: string) {
-  return moment().set({ hours: 0, minutes: 0 }).format(format);
-}
-
 function fieldValueToMoment(datetimeString: string | null | undefined): moment.Moment | null {
   if (!datetimeString) {
     return null;
@@ -42,9 +39,15 @@ function datetimeFromUserInput(input: TimeResult): {
   }
 
   const time = timeFromUserInput(input);
+  let utcOffset = input.utcOffset;
+
+  // If we have the default local offset, compute the local offset for the specified date
+  if (utcOffset === defaultZoneOffset) {
+    utcOffset = computeLocalZoneOffset(input.date, time);
+  }
 
   const date = moment
-    .parseZone(input.utcOffset, 'Z')
+    .parseZone(utcOffset, 'Z')
     .set(input.date.toObject())
     .set({ hours: time.hours(), minutes: time.minutes() });
 
@@ -93,7 +96,31 @@ export function getDefaultAMPM() {
 }
 
 export function getDefaultUtcOffset() {
-  return startOfToday('Z');
+  return defaultZoneOffset;
+}
+
+/**
+ * Compute the local zone offset for the specified date and time.
+ *
+ * Creates a new local-mode moment from the calendar date/time components so
+ * that format('Z') returns the machine's local timezone offset (DST-aware),
+ * regardless of whether `date` carries a fixed UTC offset.
+ *
+ * @param date - The moment object for the date
+ * @param time - Optional moment with time
+ * @returns The offset as a string (e.g., "-08:00", "+05:30")
+ */
+export function computeLocalZoneOffset(date: moment.Moment, time?: moment.Moment): string {
+  const localMoment = moment({
+    year: date.year(),
+    month: date.month(),
+    date: date.date(),
+    hour: time ? time.hour() : 0,
+    minute: time ? time.minute() : 0,
+    second: 0,
+    millisecond: 0,
+  });
+  return localMoment.format('Z');
 }
 
 /**
@@ -109,12 +136,17 @@ export function userInputFromDatetime({
   const datetime = fieldValueToMoment(value);
 
   if (datetime) {
+    let utcOffset = datetime.format('Z');
+    const localOffset = computeLocalZoneOffset(datetime);
+    if (utcOffset === localOffset) {
+      utcOffset = defaultZoneOffset;
+    }
     const timeFormat = uses12hClock ? 'hh:mm' : 'HH:mm';
     return {
       date: datetime,
       time: datetime.format(timeFormat),
       ampm: datetime.format('A'),
-      utcOffset: datetime.format('Z'),
+      utcOffset: utcOffset,
     };
   } else {
     return {

packages/date/src/utils/zoneOffsets.ts

@@ -1,6 +1,7 @@
-export const defaultZoneOffset = '+00:00';
+export const defaultZoneOffset = 'Local time';
 
 export const zoneOffsets = [
+  'Local time',
   '-12:00',
   '-11:00',
   '-10:00',