fix(forms): fix date parsing when default value is provided

Author: assisrafael

demo/FormExamples.jsx

@@ -21,6 +21,7 @@ export function FormExamples() {
         switchField2: true,
         checkboxField2: true,
         radioField2: 'b',
+        dateField: new Date().toISOString(),
       }}
       onChange={console.info}
       onSubmit={(formData, reset) => {
@@ -105,7 +106,7 @@ export function FormExamples() {
           <FormGroupInput name="numberField" label="Number field" type="number" />
         </div>
         <div className="col">
-          <FormGroupInput name="dateField" label="Date field " type="datetime-local" />
+          <FormGroupInput name="dateField" label="Date field" type="datetime-local" />
         </div>
       </div>
 

src/forms/helpers/useFormControl.js

@@ -1,5 +1,6 @@
 import { useContext } from 'react';
 import { FormContext } from './form-helpers';
+import { toDatetimeLocal, fromDatetimeLocal } from '../../utils/formatters';
 
 export function useFormControl(name, type) {
   const formState = useContext(FormContext);
@@ -44,7 +45,7 @@ function encode(value, type) {
   }
 
   if (type === 'datetime-local') {
-    return value && value.toISOString().slice(0, 16);
+    return toDatetimeLocal(value);
   }
 
   return value;
@@ -58,7 +59,7 @@ function getTargetValue(target) {
   }
 
   if (target.type === 'datetime-local') {
-    value = new Date(Date.parse(target.value));
+    value = fromDatetimeLocal(target.value);
   }
 
   if (target.type === 'select-one') {

src/utils/formatters.js

@@ -0,0 +1,25 @@
+import { isISOString, isDate } from './types';
+
+export function toDatetimeLocal(value) {
+  let date = value;
+
+  if (isISOString(date)) {
+    date = new Date(date);
+  }
+
+  if (!isDate(date)) {
+    throw new Error('toDatetimeLocal only accepts date objects and ISO date strings');
+  }
+
+  const YYYY = date.getFullYear().toString();
+  const MM = (date.getMonth() + 1).toString().padStart(2, '0');
+  const DD = date.getDate().toString().padStart(2, '0');
+  const hh = date.getHours().toString().padStart(2, '0');
+  const mm = date.getMinutes().toString().padStart(2, '0');
+
+  return `${YYYY}-${MM}-${DD}T${hh}:${mm}`;
+}
+
+export function fromDatetimeLocal(value) {
+  return new Date(Date.parse(value));
+}

src/utils/types.js

@@ -0,0 +1,19 @@
+export function isISOString(value) {
+  if (!isString(value)) {
+    return false;
+  }
+
+  if (value.length !== 24) {
+    return false;
+  }
+
+  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/.test(value);
+}
+
+export function isString(value) {
+  return typeof value === 'string';
+}
+
+export function isDate(value) {
+  return Object.prototype.toString.call(value) === '[object Date]';
+}