diff --git a/CHANGELOG.md b/CHANGELOG.md index 93d35a23..3ca1d6db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ - [#730](https://github.com/estruyf/vscode-front-matter/issues/730): Add debounce to the input fields - [#738](https://github.com/estruyf/vscode-front-matter/issues/738): Fix when re-opening the preview after closing it - [#743](https://github.com/estruyf/vscode-front-matter/issues/743): Fix for storing data in YAML data files +- [#745](https://github.com/estruyf/vscode-front-matter/issues/745): Fix for date field values in `block` field type ## [9.4.0] - 2023-12-12 - [Release notes](https://beta.frontmatter.codes/updates/v9.4.0) diff --git a/src/commands/Article.ts b/src/commands/Article.ts index 30082426..7936b622 100644 --- a/src/commands/Article.ts +++ b/src/commands/Article.ts @@ -13,9 +13,9 @@ import { TelemetryEvent } from './../constants'; import * as vscode from 'vscode'; -import { CustomPlaceholder, Field, TaxonomyType } from '../models'; +import { CustomPlaceholder, Field } from '../models'; import { format } from 'date-fns'; -import { ArticleHelper, Settings, SlugHelper, TaxonomyHelper } from '../helpers'; +import { ArticleHelper, Settings, SlugHelper } from '../helpers'; import { Notifications } from '../helpers/Notifications'; import { extname, basename, parse, dirname } from 'path'; import { COMMAND_NAME, DefaultFields } from '../constants'; diff --git a/src/helpers/DateHelper.ts b/src/helpers/DateHelper.ts index d9618e6d..1bcf1c28 100644 --- a/src/helpers/DateHelper.ts +++ b/src/helpers/DateHelper.ts @@ -1,4 +1,4 @@ -import { parse, parseISO, parseJSON } from 'date-fns'; +import { parse, parseISO, parseJSON, format } from 'date-fns'; export class DateHelper { public static formatUpdate(value: string | null | undefined): string | null { @@ -11,6 +11,14 @@ export class DateHelper { return value; } + public static format(date?: Date, dateFormat?: string): string | null { + if (!date || !dateFormat) { + return null; + } + + return format(date, DateHelper.formatUpdate(dateFormat) as string); + } + public static tryParse(date: any, format?: string): Date | null { if (!date) { return null; diff --git a/src/panelWebView/components/Fields/DateTimeField.tsx b/src/panelWebView/components/Fields/DateTimeField.tsx index 67257d10..d28d190e 100644 --- a/src/panelWebView/components/Fields/DateTimeField.tsx +++ b/src/panelWebView/components/Fields/DateTimeField.tsx @@ -11,7 +11,7 @@ import { LocalizationKey } from '../../../localization'; export interface IDateTimeFieldProps extends BaseFieldProps { format?: string; - onChange: (date: Date) => void; + onChange: (date: string) => void; } type InputProps = JSX.IntrinsicElements['input']; @@ -32,12 +32,17 @@ export const DateTimeField: React.FunctionComponent = ({ format, onChange }: React.PropsWithChildren) => { + const DEFAULT_FORMAT = 'MM/dd/yyyy HH:mm'; const [dateValue, setDateValue] = React.useState(null); - const onDateChange = (date: Date) => { + const onDateChange = React.useCallback((date: Date) => { setDateValue(date); - onChange(date); - }; + + const dateValue = DateHelper.format(date, format); + if (dateValue) { + onChange(dateValue); + } + }, [format, onChange]); const showRequiredState = useMemo(() => { return required && !dateValue; @@ -74,7 +79,7 @@ export const DateTimeField: React.FunctionComponent = ({ selected={(DateHelper.tryParse(dateValue, format) as Date) || new Date()} onChange={onDateChange} timeInputLabel={l10n.t(LocalizationKey.panelFieldsDateTimeFieldTime)} - dateFormat={DateHelper.formatUpdate(format) || 'MM/dd/yyyy HH:mm'} + dateFormat={DateHelper.formatUpdate(format) || DEFAULT_FORMAT} customInput={} showTimeInput={hasTimeFormat} />