- Checkpoint

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

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

@@ -2,10 +2,12 @@ import { DatePicker } from "antd";
 import PropTypes from "prop-types";
 import React, { useCallback, useState } from "react";
 import dayjs from "../../utils/day";
-import { formats } from "./formats.js";
+import { dateFormats, dateTimeFormats } from "./formats.js";
+import { useTranslation } from "react-i18next";
 
 const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, isDateOnly = false, ...restProps }) => {
   const [isManualInput, setIsManualInput] = useState(false);
+  const { t } = useTranslation();
 
   const handleChange = useCallback(
     (newDate) => {
@@ -19,6 +21,24 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, is
     [onChange]
   );
 
+  const normalizeDateTimeString = (input) => {
+    const upperV = input.toUpperCase().replaceAll(".", "/").replaceAll("-", "/");
+
+    const [datePart, ...timeParts] = upperV.split(" ");
+
+    if (timeParts.length === 0) {
+      return datePart; // If there's no time part, just return the date part.
+    }
+
+    const timePart = timeParts.join(" "); // In case there are multiple spaces, join them back
+
+    // Normalize the time part by ensuring there's a space before AM/PM if not already present
+    const normalizedTime = timePart.replace(/(\d{1,2})(:\d{2})?\s?(AM|PM)/, "$1$2 $3");
+
+    // Combine the date part with the normalized time part
+    return `${datePart} ${normalizedTime}`.trim();
+  };
+
   const handleBlur = useCallback(
     (e) => {
       if (!isManualInput) {
@@ -30,17 +50,18 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, is
       const v = e.target.value;
       if (!v) return;
 
-      const upperV = v.toUpperCase();
-
+      const upperV = normalizeDateTimeString(v);
+      console.log(upperV);
       let _a;
 
-      for (const format of formats) {
-        console.log("format",format);
+      let formatTemp;
+      for (const format of isDateOnly ? dateFormats : dateTimeFormats) {
         _a = dayjs(upperV, format);
-        console.log("🚀 ~ DateTimePicker ~ _a:", _a)
-        console.log("isvalid",_a.isValid());
+        formatTemp = format;
         if (_a.isValid()) break;
       }
+      console.log("HIT FORMAT");
+      console.log(formatTemp);
 
       if (_a && _a.isValid()) {
         if (isDateOnly) {
@@ -111,6 +132,8 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, is
         format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
         value={value ? dayjs(value) : null}
         onChange={handleChange}
+        // TODO - Add placeholder translation
+        placeholder={isDateOnly ? t("date") : t("dateAndTime")}
         onBlur={onBlur || handleBlur}
         disabledDate={handleDisabledDate}
         {...restProps}