#933 - Timezone integration in DateField

CHANGELOG.md

@@ -12,6 +12,8 @@
 
 ### 🐞 Fixes
 
+- [#933](https://github.com/estruyf/vscode-front-matter/issues/933): Timezone setting integration in the DateTime field
+
 ## [10.8.0] - 2025-02-27 - [Release notes](https://beta.frontmatter.codes/updates/v10.8.0)
 
 ### 🎨 Enhancements

src/helpers/DateHelper.ts

@@ -1,4 +1,5 @@
 import { parse, parseISO, parseJSON, format } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
 
 export class DateHelper {
   public static formatUpdate(value: string | null | undefined): string | null {
@@ -19,6 +20,20 @@ export class DateHelper {
     return format(date, DateHelper.formatUpdate(dateFormat) as string);
   }
 
+  public static formatInTimezone(
+    date?: Date,
+    dateFormat?: string,
+    timezone?: string
+  ): string | null {
+    if (!date || !dateFormat) {
+      return null;
+    }
+
+    return timezone
+      ? formatInTimeZone(date, timezone, DateHelper.formatUpdate(dateFormat) as string)
+      : format(date, DateHelper.formatUpdate(dateFormat) as string);
+  }
+
   public static tryParse(date: any, format?: string): Date | null {
     if (!date) {
       return null;

src/helpers/PanelSettings.ts

@@ -1,4 +1,5 @@
 import {
+  SETTING_GLOBAL_TIMEZONE,
   SETTING_PANEL_ACTIONS_DISABLED,
   SETTING_SPONSORS_AI_ENABLED,
   SETTING_WEBSITE_URL
@@ -68,7 +69,8 @@ export class PanelSettings {
           updateFileName: !!Settings.get<boolean>(SETTING_SLUG_UPDATE_FILE_NAME)
         },
         date: {
-          format: Settings.get<string>(SETTING_DATE_FORMAT) || ''
+          format: Settings.get<string>(SETTING_DATE_FORMAT) || '',
+          timezone: Settings.get<string>(SETTING_GLOBAL_TIMEZONE) || ''
         },
         tags: (await TaxonomyHelper.get(TaxonomyType.Tag)) || [],
         categories: (await TaxonomyHelper.get(TaxonomyType.Category)) || [],

src/models/PanelSettings.ts

@@ -177,6 +177,7 @@ export interface WhenClause {
 
 export interface DateInfo {
   format: string;
+  timezone?: string;
 }
 
 export interface SEO {

src/panelWebView/components/Fields/DateTimeField.tsx

@@ -11,6 +11,7 @@ import { LocalizationKey } from '../../../localization';
 
 export interface IDateTimeFieldProps extends BaseFieldProps<Date | null> {
   format?: string;
+  timezone?: string;
   onChange: (date: string) => void;
 }
 
@@ -30,6 +31,7 @@ export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({
   value,
   required,
   format,
+  timezone,
   onChange
 }: React.PropsWithChildren<IDateTimeFieldProps>) => {
   const DEFAULT_FORMAT = 'MM/dd/yyyy HH:mm';
@@ -38,7 +40,7 @@ export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({
   const onDateChange = React.useCallback((date: Date) => {
     setDateValue(date);
     if (format) {
-      onChange(DateHelper.format(date, format) || "");
+      onChange(DateHelper.formatInTimezone(date, format, timezone) || "");
     } else {
       onChange(date.toISOString());
     }

src/panelWebView/components/Fields/WrapperField.tsx

@@ -193,6 +193,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
           required={!!field.required}
           format={field.dateFormat || settings?.date?.format}
           onChange={onFieldChange}
+          timezone={settings?.date?.timezone}
         />
       </FieldBoundary>
     );

src/utils/formatInTimezone.ts

@@ -1,11 +1,7 @@
-import { format } from 'date-fns';
-import { formatInTimeZone } from 'date-fns-tz';
 import { SETTING_GLOBAL_TIMEZONE } from '../constants';
 import { DateHelper, Settings } from '../helpers';
 
 export const formatInTimezone = (date: Date, dateFormat: string) => {
   const timezone = Settings.get<string>(SETTING_GLOBAL_TIMEZONE);
-  return timezone
-    ? formatInTimeZone(date, timezone, DateHelper.formatUpdate(dateFormat) as string)
-    : format(date, DateHelper.formatUpdate(dateFormat) as string);
+  return DateHelper.formatInTimezone(date, dateFormat, timezone) || '';
 };