#745 - Fix date field

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)
 

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';

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;

src/panelWebView/components/Fields/DateTimeField.tsx

@@ -11,7 +11,7 @@ import { LocalizationKey } from '../../../localization';
 
 export interface IDateTimeFieldProps extends BaseFieldProps<Date | null> {
   format?: string;
-  onChange: (date: Date) => void;
+  onChange: (date: string) => void;
 }
 
 type InputProps = JSX.IntrinsicElements['input'];
@@ -32,12 +32,17 @@ export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({
   format,
   onChange
 }: React.PropsWithChildren<IDateTimeFieldProps>) => {
+  const DEFAULT_FORMAT = 'MM/dd/yyyy HH:mm';
   const [dateValue, setDateValue] = React.useState<Date | null>(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<IDateTimeFieldProps> = ({
           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={<CustomInput />}
           showTimeInput={hasTimeFormat}
         />