fix(date-input): ability to update date input externally when it is passed a valid date

Author: jaruesink

packages/ui-components/src/lib/inputs/InputDate/InputDate.tsx

@@ -34,11 +34,11 @@ export const InputDate: FC<InputDateProps> = ({
   const formContext = useFormContext();
   if (!formikProps && formContext) formikProps = formContext;
   const fieldValue = formikProps ? _get(formikProps?.values, props.name, '') : value;
-  const fieldDateTime = valueFormat ? DateTime.fromFormat(fieldValue, valueFormat) : DateTime.fromISO(fieldValue);
+  const fieldDateTime = valueFormat ? DateTime.fromFormat(fieldValue, valueFormat) : DateTime.fromJSDate(fieldValue);
   const [inputValue, setInputValue] = React.useState<DateTime | null>(fieldValue);
 
   useEffect(() => {
-    if (fieldDateTime.isValid) setInputValue(fieldDateTime);
+    if (fieldDateTime.isValid) setInputValue(fieldValue);
   }, [fieldValue]);
 
   return (

packages/ui-components/src/lib/inputs/InputDate/input-date-documentation/input-date.examples.tsx

@@ -1,31 +1,26 @@
 import React, { FC } from 'react';
-import { FormikProps, useFormik } from 'formik';
-import { InputDate } from '../../..';
+import { Form, InputDate } from '../../..';
 
 export const inputDateExample1: FC<any> = () => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const formikProps: FormikProps<any> = useFormik({
-    initialValues: {
-      sampleDate: new Date(),
-      formattedDate: '',
-      onChangeDate: new Date()
-    },
-    onSubmit: () => undefined
-  });
-
   return (
-    <>
-      Value: {JSON.stringify(formikProps.values.sampleDate)}
-      <InputDate name="sampleDate" formikProps={formikProps} />
-      Value: {formikProps.values.formattedDate}
-      <InputDate name="formattedDate" valueFormat={'LL/dd/yyyy'} formikProps={formikProps} />
-      Value:{' '}
-      {formikProps.values.onChangeDate instanceof Date ? formikProps.values.onChangeDate.toLocaleDateString() : ''}
-      <InputDate
-        name="onChangeDate"
-        formikProps={formikProps}
-        onChange={(date: string | Date | null) => console.log(date)}
-      />
-    </>
+    <Form
+      initialValues={{
+        sampleDate: new Date(),
+        formattedDate: '',
+        onChangeDate: new Date()
+      }}
+    >
+      {formikProps => (
+        <>
+          Value: {JSON.stringify(formikProps.values.sampleDate)}
+          <InputDate name="sampleDate" />
+          Value: {formikProps.values.formattedDate}
+          <InputDate name="formattedDate" valueFormat={'LL/dd/yyyy'} />
+          Value:{' '}
+          {formikProps.values.onChangeDate instanceof Date ? formikProps.values.onChangeDate.toLocaleDateString() : ''}
+          <InputDate name="onChangeDate" onChange={(date: string | Date | null) => console.log(date)} />
+        </>
+      )}
+    </Form>
   );
 };

packages/ui-components/src/lib/inputs/InputDate/input-date-documentation/input-date.stories.mdx

@@ -14,29 +14,26 @@ import { inputDateExample1 } from './input-date.examples.tsx';
       docs: {
         source: {
           code: dedent`
-  const formikProps: FormikProps<any> = useFormik({
-    initialValues: {
-      sampleDate: new Date(),
-      formattedDate: '',
-      onChangeDate: new Date()
-    },
-    onSubmit: () => undefined
-  });
-  return (
-    <>
-      Value: {JSON.stringify(formikProps.values.sampleDate)}
-      <InputDate name="sampleDate" formikProps={formikProps} />
-      Value: {formikProps.values.formattedDate}
-      <InputDate name="formattedDate" valueFormat={'LL/dd/yyyy'} formikProps={formikProps} />
-      Value:{' '}
-      {formikProps.values.onChangeDate instanceof Date ? formikProps.values.onChangeDate.toLocaleDateString() : ''}
-      <InputDate
-        name="onChangeDate"
-        formikProps={formikProps}
-        onChange={(date: string | Date | null) => console.log(date)}
-      />
-    </>
-  );`
+    <Form
+      initialValues={{
+        sampleDate: new Date(),
+        formattedDate: '',
+        onChangeDate: new Date()
+      }}
+    >
+      {formikProps => (
+        <>
+          Value: {JSON.stringify(formikProps.values.sampleDate)}
+          <InputDate name="sampleDate" />
+          Value: {formikProps.values.formattedDate}
+          <InputDate name="formattedDate" valueFormat={'LL/dd/yyyy'} />
+          Value:{' '}
+          {formikProps.values.onChangeDate instanceof Date ? formikProps.values.onChangeDate.toLocaleDateString() : ''}
+          <InputDate name="onChangeDate" onChange={(date: string | Date | null) => console.log(date)} />
+        </>
+      )}
+    </Form>
+    `
         }
       }
     }}