Fix IO-2533

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -1,100 +1,105 @@
-import { DatePicker } from "antd";
+import {DatePicker} from "antd";
 import dayjs from "../../utils/day";
-import React, { useRef } from "react";
+import React, {useRef} from "react";
+
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {selectBodyshop} from "../../redux/user/user.selectors";
 
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
+    bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
-const mapDispatchToProps = (dispatch) => ({});
 export default connect(mapStateToProps, mapDispatchToProps)(FormDatePicker);
 
 const dateFormat = "MM/DD/YYYY";
 
-
-// TODO, this is causing a dirty change when it should not (click the picker, click off the picker)
 export function FormDatePicker({
-                                 bodyshop,
-                                 value,
-                                 onChange,
-                                 onBlur,
-                                 onlyFuture,
-                                 isDateOnly = true,
-                                 ...restProps
+                                   bodyshop,
+                                   value,
+                                   onChange,
+                                   onBlur,
+                                   onlyFuture,
+                                   isDateOnly = true,
+                                   ...restProps
                                }) {
-  const ref = useRef();
+    const ref = useRef();
 
-  const handleChange = (newDate) => {
-    if (value !== newDate && onChange) {
-      onChange(isDateOnly ? newDate && newDate.format("YYYY-MM-DD") : newDate);
-    }
-  };
-
-  const handleKeyDown = (e) => {
-    if (e.key.toLowerCase() === "t") {
-      if (onChange) {
-        onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
-      }
-    } 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 = dayjs(
-        v,
-        ["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY"],
-        "en",
-        false
-    );
-
-    if (
-        _a.isValid()
-        && value
-        && value.isValid
-        && value.isValid()
-    ) {
-      _a.set({
-        hours: value.hours(),
-        minutes: value.minutes(),
-        seconds: value.seconds(),
-        milliseconds: value.milliseconds(),
-      });
-    }
-
-    if (_a.isValid() && onChange) {
-      if (onlyFuture) {
-        if (dayjs().subtract(1, "day").isBefore(_a)) {
-          onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
-        } else {
-          onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
+    const handleChange = (newDate) => {
+        if (value !== newDate && onChange) {
+            onChange(isDateOnly ? newDate && newDate.format("YYYY-MM-DD") : newDate);
         }
-      } else {
-        onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
-      }
-    }
-  };
+    };
 
-  return (
-      <div onKeyDown={handleKeyDown}>
-        <DatePicker
-            ref={ref}
-            value={value ? dayjs(value) : null}
-            onChange={handleChange}
-            format={dateFormat}
-            onBlur={onBlur || handleBlur}
-            showToday={false}
-            disabledTime
-            {...(onlyFuture && {
-              disabledDate: (d) => dayjs().subtract(1, "day").isAfter(d),
-            })}
-            {...restProps}
-        />
-      </div>
-  );
+    const handleKeyDown = (e) => {
+        if (e.key.toLowerCase() === "t") {
+            if (onChange) {
+                onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
+            }
+        } 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 formats = ["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY", "MM/DD/YYYY"];
+        let _a;
+
+        // Iterate through formats to find the correct one
+        for (let format of formats) {
+            _a = dayjs(v, format);
+            if (v === _a.format(format)) {
+                break;
+            }
+        }
+
+        if (
+            _a.isValid()
+            && value
+            && value.isValid
+            && value.isValid()
+        ) {
+            _a.set({
+                hours: value.hours(),
+                minutes: value.minutes(),
+                seconds: value.seconds(),
+                milliseconds: value.milliseconds(),
+            });
+        }
+
+        if (_a.isValid() && onChange) {
+            if (onlyFuture) {
+                if (dayjs().subtract(1, "day").isBefore(_a)) {
+                    onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
+                } else {
+                    onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
+                }
+            } else {
+                onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
+            }
+        }
+    };
+
+    return (
+        <div onKeyDown={handleKeyDown}>
+            <DatePicker
+                ref={ref}
+                value={value ? dayjs(value) : null}
+                onChange={handleChange}
+                format={dateFormat}
+                onBlur={onBlur || handleBlur}
+                showToday={false}
+                disabledTime
+                {...(onlyFuture && {
+                    disabledDate: (d) => dayjs().subtract(1, "day").isAfter(d),
+                })}
+                {...restProps}
+            />
+        </div>
+    );
 }