IO-1671 Improved date handling for form item.

client/src/components/form-date-picker/form-date-picker.component.jsx

@@ -1,16 +1,22 @@
 import { DatePicker } from "antd";
 import moment from "moment";
-import React, { forwardRef } from "react";
+import React, { useRef } from "react";
 //To be used as a form element only.
 
 const dateFormat = "MM/DD/YYYY";
 
-const FormDatePicker = (
-  { value, onChange, onBlur, onlyFuture, ...restProps },
-  ref
-) => {
+export default function FormDatePicker({
+  value,
+  onChange,
+  onBlur,
+  onlyFuture,
+  ...restProps
+}) {
+  const ref = useRef();
+
   const handleChange = (newDate) => {
     if (value !== newDate && onChange) {
+      console.log("XXX1");
       onChange(newDate);
     }
   };
@@ -19,17 +25,34 @@ const FormDatePicker = (
     if (e.key.toLowerCase() === "t") {
       if (onChange) {
         onChange(new moment());
+        if (ref.current && ref.current.blur) ref.current.blur();
       }
+    } else if (e.key.toLowerCase() === "enter") {
+      if (ref.current && ref.current.blur) ref.current.blur();
     }
   };
 
+  const handleBlur = (e) => {
+    const v = e.target.value;
+    if (!v) return;
+
+    const _a = moment(
+      v,
+      ["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY"],
+      "en",
+      false
+    );
+    if (_a.isValid() && onChange) onChange(_a);
+  };
+
   return (
     <div onKeyDown={handleKeyDown}>
       <DatePicker
+        ref={ref}
         value={value ? moment(value) : null}
         onChange={handleChange}
         format={dateFormat}
-        onBlur={onBlur}
+        onBlur={onBlur || handleBlur}
         disabledTime
         {...(onlyFuture && {
           disabledDate: (d) => moment().subtract(1, "day").isAfter(d),
@@ -38,6 +61,4 @@ const FormDatePicker = (
       />
     </div>
   );
-};
-
-export default forwardRef(FormDatePicker);
+}