#146 - Date parsing logic added with fallbacks

src/panelWebView/components/Fields/DateTimeField.tsx

@@ -3,6 +3,7 @@ import { VsLabel } from '../VscodeComponents';
 import { ClockIcon } from '@heroicons/react/outline';
 import DatePicker from 'react-datepicker';
 import { forwardRef } from 'react';
+import { DateHelper } from '../../../helpers/DateHelper';
 
 export interface IDateTimeFieldProps {
   label: string;
@@ -22,7 +23,7 @@ const CustomInput = forwardRef<HTMLInputElement, InputProps>(({ value, onClick }
 });
 
 export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({label, date, format, onChange}: React.PropsWithChildren<IDateTimeFieldProps>) => {
-  const [ dateValue, setDateValue ] = React.useState<Date | null>(date);
+  const [ dateValue, setDateValue ] = React.useState<Date | null>(null);
   
   const onDateChange = (date: Date) => {
     setDateValue(date);
@@ -30,10 +31,10 @@ export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({lab
   };
 
   React.useEffect(() => {
-    const crntValue = typeof date?.toISOString === 'function' ? date.toISOString() : date;
-    const stateValue = typeof dateValue?.toISOString === 'function' ? dateValue.toISOString() : dateValue;
+    const crntValue = DateHelper.tryParse(date, format);
+    const stateValue = DateHelper.tryParse(dateValue, format);
 
-    if (crntValue !== stateValue) {
+    if (crntValue?.toISOString() !== stateValue?.toISOString()) {
       setDateValue(date);
     }
   }, [ date ]);

src/panelWebView/components/Metadata.tsx

@@ -8,7 +8,6 @@ import { Toggle } from './Fields/Toggle';
 import { SymbolKeywordIcon } from './Icons/SymbolKeywordIcon';
 import { TagIcon } from './Icons/TagIcon';
 import { TagPicker } from './TagPicker';
-import { parseJSON } from 'date-fns';
 import { DateTimeField } from './Fields/DateTimeField';
 import { TextField } from './Fields/TextField';
 import "react-datepicker/dist/react-datepicker.css";
@@ -17,6 +16,7 @@ import { ListUnorderedIcon } from './Icons/ListUnorderedIcon';
 import { NumberField } from './Fields/NumberField';
 import { ChoiceField } from './Fields/ChoiceField';
 import useContentType from '../../hooks/useContentType';
+import { DateHelper } from '../../helpers/DateHelper';
 
 export interface IMetadataProps {
   settings: PanelSettings | undefined;
@@ -39,11 +39,9 @@ export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, met
     });
   };
 
-  const getDate = (date: string | Date) => {
-    if (typeof date === 'string') {
-      return parseJSON(date);
-    }
-    return date;
+  const getDate = (date: string | Date): Date | null => {
+    const parsedDate = DateHelper.tryParse(date, settings?.date?.format);
+    return parsedDate || date as Date | null;
   }
 
   if (!settings) {