diff --git a/CHANGELOG.md b/CHANGELOG.md index 6263d9df..aeb501e9 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/helpers/DateHelper.ts b/src/helpers/DateHelper.ts index 1bcf1c28..b137609f 100644 --- a/src/helpers/DateHelper.ts +++ b/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; diff --git a/src/helpers/PanelSettings.ts b/src/helpers/PanelSettings.ts index 577af426..350e7a4e 100644 --- a/src/helpers/PanelSettings.ts +++ b/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(SETTING_SLUG_UPDATE_FILE_NAME) }, date: { - format: Settings.get(SETTING_DATE_FORMAT) || '' + format: Settings.get(SETTING_DATE_FORMAT) || '', + timezone: Settings.get(SETTING_GLOBAL_TIMEZONE) || '' }, tags: (await TaxonomyHelper.get(TaxonomyType.Tag)) || [], categories: (await TaxonomyHelper.get(TaxonomyType.Category)) || [], diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts index deb494b3..02f410de 100644 --- a/src/models/PanelSettings.ts +++ b/src/models/PanelSettings.ts @@ -177,6 +177,7 @@ export interface WhenClause { export interface DateInfo { format: string; + timezone?: string; } export interface SEO { diff --git a/src/panelWebView/components/Fields/DateTimeField.tsx b/src/panelWebView/components/Fields/DateTimeField.tsx index 9f151955..9d6e06af 100644 --- a/src/panelWebView/components/Fields/DateTimeField.tsx +++ b/src/panelWebView/components/Fields/DateTimeField.tsx @@ -11,6 +11,7 @@ import { LocalizationKey } from '../../../localization'; export interface IDateTimeFieldProps extends BaseFieldProps { format?: string; + timezone?: string; onChange: (date: string) => void; } @@ -30,6 +31,7 @@ export const DateTimeField: React.FunctionComponent = ({ value, required, format, + timezone, onChange }: React.PropsWithChildren) => { const DEFAULT_FORMAT = 'MM/dd/yyyy HH:mm'; @@ -38,7 +40,7 @@ export const DateTimeField: React.FunctionComponent = ({ 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()); } diff --git a/src/panelWebView/components/Fields/WrapperField.tsx b/src/panelWebView/components/Fields/WrapperField.tsx index ab2f5a5d..33af3bac 100644 --- a/src/panelWebView/components/Fields/WrapperField.tsx +++ b/src/panelWebView/components/Fields/WrapperField.tsx @@ -193,6 +193,7 @@ export const WrapperField: React.FunctionComponent = ({ required={!!field.required} format={field.dateFormat || settings?.date?.format} onChange={onFieldChange} + timezone={settings?.date?.timezone} /> ); diff --git a/src/utils/formatInTimezone.ts b/src/utils/formatInTimezone.ts index df17c063..3d6af586 100644 --- a/src/utils/formatInTimezone.ts +++ b/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(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) || ''; };