From 98f44236245d10e20850e2dd7f0ff69c92e7987f Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Wed, 21 Aug 2024 17:55:40 -0400 Subject: [PATCH] - Checkpoint Signed-off-by: Dave Richer --- .../form-date-time-picker.component.jsx | 37 +++- .../form-date-time-picker/formats.js | 189 ++++++++---------- 2 files changed, 111 insertions(+), 115 deletions(-) diff --git a/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx b/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx index 85349ff06..d8c21a5ab 100644 --- a/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx +++ b/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} diff --git a/client/src/components/form-date-time-picker/formats.js b/client/src/components/form-date-time-picker/formats.js index 0ca0d52c6..b68704a72 100644 --- a/client/src/components/form-date-time-picker/formats.js +++ b/client/src/components/form-date-time-picker/formats.js @@ -1,123 +1,96 @@ export const dateTimeFormats = [ - "MMDDYY h:mma", - "MMDDYYYY h:mma", - "M/D/YY h:mma", - "M/DD/YY h:mma", - "MM/D/YY h:mma", - "MM/DD/YY h:mma", - "M/D/YYYY h:mma", - "M/DD/YYYY h:mma", - "MM/D/YYYY h:mma", - "MM/DD/YYYY h:mma", + // Four-digit year with time + "M/D/YYYY h:mm A", // Example: 1/5/2023 9:00 AM + "M/D/YYYY h:mmA", // Example: 1/5/2023 9:00AM + "M/D/YYYY h A", // Example: 1/5/2023 9 AM + "M/D/YYYY hA", // Example: 1/5/2023 9AM + "M/D/YYYY hh:mm A", // Example: 1/5/2023 02:25 PM + "M/D/YYYY hh:mm:ss A", // Example: 1/5/2023 02:25:45 PM - "MMDDYY h:mmA", - "MMDDYYYY h:mmA", - "M/D/YY h:mmA", - "M/DD/YY h:mmA", - "MM/D/YY h:mmA", - "MM/DD/YY h:mmA", - "M/D/YYYY h:mmA", - "M/DD/YYYY h:mmA", - "MM/D/YYYY h:mmA", - "MM/DD/YYYY h:mmA", + "MM/D/YYYY h:mm A", // Example: 12/5/2023 9:00 AM + "MM/D/YYYY h:mmA", // Example: 12/5/2023 9:00AM + "MM/D/YYYY h A", // Example: 12/5/2023 9 AM + "MM/D/YYYY hA", // Example: 12/5/2023 9AM + "MM/D/YYYY hh:mm A", // Example: 12/5/2023 02:25 PM + "MM/D/YYYY hh:mm:ss A", // Example: 12/5/2023 02:25:45 PM - "MMDDYY h:mm a", - "MMDDYYYY h:mm a", - "M/D/YY h:mm a", - "M/DD/YY h:mm a", - "MM/D/YY h:mm a", - "MM/DD/YY h:mm a", - "M/D/YYYY h:mm a", - "M/DD/YYYY h:mm a", - "MM/D/YYYY h:mm a", - "MM/DD/YYYY h:mm a", + "M/DD/YYYY h:mm A", // Example: 1/25/2023 9:00 AM + "M/DD/YYYY h:mmA", // Example: 1/25/2023 9:00AM + "M/DD/YYYY h A", // Example: 1/25/2023 9 AM + "M/DD/YYYY hA", // Example: 1/25/2023 9AM + "M/DD/YYYY hh:mm A", // Example: 1/25/2023 02:25 PM + "M/DD/YYYY hh:mm:ss A", // Example: 1/25/2023 02:25:45 PM - "MMDDYY h:mm A", - "MMDDYYYY h:mm A", - "M/D/YY h:mm A", - "M/DD/YY h:mm A", - "MM/D/YY h:mm A", - "MM/DD/YY h:mm A", - "M/D/YYYY h:mm A", - "M/DD/YYYY h:mm A", - "MM/D/YYYY h:mm A", - "MM/DD/YYYY h:mm A", + "MM/DD/YYYY h:mm A", // Example: 12/25/2023 9:00 AM + "MM/DD/YYYY h:mmA", // Example: 12/25/2023 9:00AM + "MM/DD/YYYY h A", // Example: 12/25/2023 9 AM + "MM/DD/YYYY hA", // Example: 12/25/2023 9AM + "MM/DD/YYYY hh:mm A", // Example: 12/25/2023 02:25 PM + "MM/DD/YYYY hh:mm:ss A", // Example: 12/25/2023 02:25:45 PM - "MMDDYY h:mm:ssa", - "MMDDYYYY h:mm:ssa", - "M/D/YY h:mm:ssa", - "M/DD/YY h:mm:ssa", - "MM/D/YY h:mm:ssa", - "MM/DD/YY h:mm:ssa", - "M/D/YYYY h:mm:ssa", - "M/DD/YYYY h:mm:ssa", - "MM/D/YYYY h:mm:ssa", - "MM/DD/YYYY h:mm:ssa", + // Two-digit year with time + "M/D/YY h:mm A", // Example: 1/5/23 9:00 AM + "M/D/YY h:mmA", // Example: 1/5/23 9:00AM + "M/D/YY h A", // Example: 1/5/23 9 AM + "M/D/YY hA", // Example: 1/5/23 9AM + "M/D/YY hh:mm A", // Example: 1/5/23 02:25 PM + "M/D/YY hh:mm:ss A", // Example: 1/5/23 02:25:45 PM - "MMDDYY h:mm:ssA", - "MMDDYYYY h:mm:ssA", - "M/D/YY h:mm:ssA", - "M/DD/YY h:mm:ssA", - "MM/D/YY h:mm:ssA", - "MM/DD/YY h:mm:ssA", - "M/D/YYYY h:mm:ssA", - "M/DD/YYYY h:mm:ssA", - "MM/D/YYYY h:mm:ssA", - "MM/DD/YYYY h:mm:ssA", + "MM/D/YY h:mm A", // Example: 12/5/23 9:00 AM + "MM/D/YY h:mmA", // Example: 12/5/23 9:00AM + "MM/D/YY h A", // Example: 12/5/23 9 AM + "MM/D/YY hA", // Example: 12/5/23 9AM + "MM/D/YY hh:mm A", // Example: 12/5/23 02:25 PM + "MM/D/YY hh:mm:ss A", // Example: 12/5/23 02:25:45 PM - "MMDDYY h:mm:ss a", - "MMDDYYYY h:mm:ss a", - "M/D/YY h:mm:ss a", - "M/DD/YY h:mm:ss a", - "MM/D/YY h:mm:ss a", - "MM/DD/YY h:mm:ss a", - "M/D/YYYY h:mm:ss a", - "M/DD/YYYY h:mm:ss a", - "MM/D/YYYY h:mm:ss a", - "MM/DD/YYYY h:mm:ss a", + "M/DD/YY h:mm A", // Example: 1/25/23 9:00 AM + "M/DD/YY h:mmA", // Example: 1/25/23 9:00AM + "M/DD/YY h A", // Example: 1/25/23 9 AM + "M/DD/YY hA", // Example: 1/25/23 9AM + "M/DD/YY hh:mm A", // Example: 1/25/23 02:25 PM + "M/DD/YY hh:mm:ss A", // Example: 1/25/23 02:25:45 PM - "MMDDYY h:mm:ss A", - "MMDDYYYY h:mm:ss A", - "M/D/YY h:mm:ss A", - "M/DD/YY h:mm:ss A", - "MM/D/YY h:mm:ss A", - "MM/DD/YY h:mm:ss A", - "M/D/YYYY h:mm:ss A", - "M/DD/YYYY h:mm:ss A", - "MM/D/YYYY h:mm:ss A", - "MM/DD/YYYY h:mm:ss A", + "MM/DD/YY h:mm A", // Example: 12/25/23 9:00 AM + "MM/DD/YY h:mmA", // Example: 12/25/23 9:00AM + "MM/DD/YY h A", // Example: 12/25/23 9 AM + "MM/DD/YY hA", // Example: 12/25/23 9AM + "MM/DD/YY hh:mm A", // Example: 12/25/23 02:25 PM + "MM/DD/YY hh:mm:ss A", // Example: 12/25/23 02:25:45 PM - "MMDDYY H:mm", - "MMDDYYYY H:mm", - "M/D/YY H:mm", - "M/DD/YY H:mm", - "MM/D/YY H:mm", - "MM/DD/YY H:mm", - "M/D/YYYY H:mm", - "M/DD/YYYY H:mm", - "MM/D/YYYY H:mm", - "MM/DD/YYYY H:mm", + // Four-digit year without time + "M/D/YYYY", // Example: 1/5/2023 + "MM/D/YYYY", // Example: 12/5/2023 + "M/DD/YYYY", // Example: 1/25/2023 + "MM/DD/YYYY", // Example: 12/25/2023 - "MMDDYY H:mm:ss", - "MMDDYYYY H:mm:ss", - "M/D/YY H:mm:ss", - "M/DD/YY H:mm:ss", - "MM/D/YY H:mm:ss", - "MM/DD/YY H:mm:ss", - "M/D/YYYY H:mm:ss", - "MM/D/YYYY H:mm:ss", - "MM/DD/YYYY H:mm:ss" + // Two-digit year without time + "M/D/YY", // Example: 1/5/23 + "MM/D/YY", // Example: 12/5/23 + "M/DD/YY", // Example: 1/25/23 + "MM/DD/YY" // Example: 12/25/23 ]; +// CONFIRMED export const dateFormats = [ - "MMDDYY", "MMDDYYYY", - "M/D/YY", - "M/DD/YY", - "MM/D/YY", - "MM/DD/YY", - "M/D/YYYY", - "M/DD/YYYY", - "MM/D/YYYY", - "MM/DD/YYYY" + "MMDDYY", + // Four-digit year + "M/D/YYYY", // Example: 1/5/2023 + "MM/D/YYYY", // Example: 12/5/2023 + "M/DD/YYYY", // Example: 1/25/2023 + "MM/DD/YYYY", // Example: 12/25/2023 + + // Two-digit year + "M/D/YY", // Example: 1/5/23 + "MM/D/YY", // Example: 12/5/23 + "M/DD/YY", // Example: 1/25/23 + "MM/DD/YY", // Example: 12/25/23 + + // Explicitly handle single-digit month and day + "M/D/YY", // Example: 1/5/23 + "M/D/YYYY", // Example: 1/5/2023 + "M/DD/YY", // Example: 1/25/23 + "M/DD/YYYY", // Example: 1/25/2023 + "MM/D/YY", // Example: 12/5/23 + "MM/D/YYYY" // Example: 12/5/2023 ];