@@ -2,10 +2,12 @@ import { DatePicker } from "antd";
|
|||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import React, { useCallback, useState } from "react";
|
import React, { useCallback, useState } from "react";
|
||||||
import dayjs from "../../utils/day";
|
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 DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, isDateOnly = false, ...restProps }) => {
|
||||||
const [isManualInput, setIsManualInput] = useState(false);
|
const [isManualInput, setIsManualInput] = useState(false);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const handleChange = useCallback(
|
const handleChange = useCallback(
|
||||||
(newDate) => {
|
(newDate) => {
|
||||||
@@ -19,6 +21,24 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, is
|
|||||||
[onChange]
|
[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(
|
const handleBlur = useCallback(
|
||||||
(e) => {
|
(e) => {
|
||||||
if (!isManualInput) {
|
if (!isManualInput) {
|
||||||
@@ -30,17 +50,18 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, is
|
|||||||
const v = e.target.value;
|
const v = e.target.value;
|
||||||
if (!v) return;
|
if (!v) return;
|
||||||
|
|
||||||
const upperV = v.toUpperCase();
|
const upperV = normalizeDateTimeString(v);
|
||||||
|
console.log(upperV);
|
||||||
let _a;
|
let _a;
|
||||||
|
|
||||||
for (const format of formats) {
|
let formatTemp;
|
||||||
console.log("format",format);
|
for (const format of isDateOnly ? dateFormats : dateTimeFormats) {
|
||||||
_a = dayjs(upperV, format);
|
_a = dayjs(upperV, format);
|
||||||
console.log("🚀 ~ DateTimePicker ~ _a:", _a)
|
formatTemp = format;
|
||||||
console.log("isvalid",_a.isValid());
|
|
||||||
if (_a.isValid()) break;
|
if (_a.isValid()) break;
|
||||||
}
|
}
|
||||||
|
console.log("HIT FORMAT");
|
||||||
|
console.log(formatTemp);
|
||||||
|
|
||||||
if (_a && _a.isValid()) {
|
if (_a && _a.isValid()) {
|
||||||
if (isDateOnly) {
|
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"}
|
format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
|
||||||
value={value ? dayjs(value) : null}
|
value={value ? dayjs(value) : null}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
|
// TODO - Add placeholder translation
|
||||||
|
placeholder={isDateOnly ? t("date") : t("dateAndTime")}
|
||||||
onBlur={onBlur || handleBlur}
|
onBlur={onBlur || handleBlur}
|
||||||
disabledDate={handleDisabledDate}
|
disabledDate={handleDisabledDate}
|
||||||
{...restProps}
|
{...restProps}
|
||||||
|
|||||||
@@ -1,123 +1,96 @@
|
|||||||
export const dateTimeFormats = [
|
export const dateTimeFormats = [
|
||||||
"MMDDYY h:mma",
|
// Four-digit year with time
|
||||||
"MMDDYYYY h:mma",
|
"M/D/YYYY h:mm A", // Example: 1/5/2023 9:00 AM
|
||||||
"M/D/YY h:mma",
|
"M/D/YYYY h:mmA", // Example: 1/5/2023 9:00AM
|
||||||
"M/DD/YY h:mma",
|
"M/D/YYYY h A", // Example: 1/5/2023 9 AM
|
||||||
"MM/D/YY h:mma",
|
"M/D/YYYY hA", // Example: 1/5/2023 9AM
|
||||||
"MM/DD/YY h:mma",
|
"M/D/YYYY hh:mm A", // Example: 1/5/2023 02:25 PM
|
||||||
"M/D/YYYY h:mma",
|
"M/D/YYYY hh:mm:ss A", // Example: 1/5/2023 02:25:45 PM
|
||||||
"M/DD/YYYY h:mma",
|
|
||||||
"MM/D/YYYY h:mma",
|
|
||||||
"MM/DD/YYYY h:mma",
|
|
||||||
|
|
||||||
"MMDDYY h:mmA",
|
"MM/D/YYYY h:mm A", // Example: 12/5/2023 9:00 AM
|
||||||
"MMDDYYYY h:mmA",
|
"MM/D/YYYY h:mmA", // Example: 12/5/2023 9:00AM
|
||||||
"M/D/YY h:mmA",
|
"MM/D/YYYY h A", // Example: 12/5/2023 9 AM
|
||||||
"M/DD/YY h:mmA",
|
"MM/D/YYYY hA", // Example: 12/5/2023 9AM
|
||||||
"MM/D/YY h:mmA",
|
"MM/D/YYYY hh:mm A", // Example: 12/5/2023 02:25 PM
|
||||||
"MM/DD/YY h:mmA",
|
"MM/D/YYYY hh:mm:ss A", // Example: 12/5/2023 02:25:45 PM
|
||||||
"M/D/YYYY h:mmA",
|
|
||||||
"M/DD/YYYY h:mmA",
|
|
||||||
"MM/D/YYYY h:mmA",
|
|
||||||
"MM/DD/YYYY h:mmA",
|
|
||||||
|
|
||||||
"MMDDYY h:mm a",
|
"M/DD/YYYY h:mm A", // Example: 1/25/2023 9:00 AM
|
||||||
"MMDDYYYY h:mm a",
|
"M/DD/YYYY h:mmA", // Example: 1/25/2023 9:00AM
|
||||||
"M/D/YY h:mm a",
|
"M/DD/YYYY h A", // Example: 1/25/2023 9 AM
|
||||||
"M/DD/YY h:mm a",
|
"M/DD/YYYY hA", // Example: 1/25/2023 9AM
|
||||||
"MM/D/YY h:mm a",
|
"M/DD/YYYY hh:mm A", // Example: 1/25/2023 02:25 PM
|
||||||
"MM/DD/YY h:mm a",
|
"M/DD/YYYY hh:mm:ss A", // Example: 1/25/2023 02:25:45 PM
|
||||||
"M/D/YYYY h:mm a",
|
|
||||||
"M/DD/YYYY h:mm a",
|
|
||||||
"MM/D/YYYY h:mm a",
|
|
||||||
"MM/DD/YYYY h:mm a",
|
|
||||||
|
|
||||||
"MMDDYY h:mm A",
|
"MM/DD/YYYY h:mm A", // Example: 12/25/2023 9:00 AM
|
||||||
"MMDDYYYY h:mm A",
|
"MM/DD/YYYY h:mmA", // Example: 12/25/2023 9:00AM
|
||||||
"M/D/YY h:mm A",
|
"MM/DD/YYYY h A", // Example: 12/25/2023 9 AM
|
||||||
"M/DD/YY h:mm A",
|
"MM/DD/YYYY hA", // Example: 12/25/2023 9AM
|
||||||
"MM/D/YY h:mm A",
|
"MM/DD/YYYY hh:mm A", // Example: 12/25/2023 02:25 PM
|
||||||
"MM/DD/YY h:mm A",
|
"MM/DD/YYYY hh:mm:ss A", // Example: 12/25/2023 02:25:45 PM
|
||||||
"M/D/YYYY h:mm A",
|
|
||||||
"M/DD/YYYY h:mm A",
|
|
||||||
"MM/D/YYYY h:mm A",
|
|
||||||
"MM/DD/YYYY h:mm A",
|
|
||||||
|
|
||||||
"MMDDYY h:mm:ssa",
|
// Two-digit year with time
|
||||||
"MMDDYYYY h:mm:ssa",
|
"M/D/YY h:mm A", // Example: 1/5/23 9:00 AM
|
||||||
"M/D/YY h:mm:ssa",
|
"M/D/YY h:mmA", // Example: 1/5/23 9:00AM
|
||||||
"M/DD/YY h:mm:ssa",
|
"M/D/YY h A", // Example: 1/5/23 9 AM
|
||||||
"MM/D/YY h:mm:ssa",
|
"M/D/YY hA", // Example: 1/5/23 9AM
|
||||||
"MM/DD/YY h:mm:ssa",
|
"M/D/YY hh:mm A", // Example: 1/5/23 02:25 PM
|
||||||
"M/D/YYYY h:mm:ssa",
|
"M/D/YY hh:mm:ss A", // Example: 1/5/23 02:25:45 PM
|
||||||
"M/DD/YYYY h:mm:ssa",
|
|
||||||
"MM/D/YYYY h:mm:ssa",
|
|
||||||
"MM/DD/YYYY h:mm:ssa",
|
|
||||||
|
|
||||||
"MMDDYY h:mm:ssA",
|
"MM/D/YY h:mm A", // Example: 12/5/23 9:00 AM
|
||||||
"MMDDYYYY h:mm:ssA",
|
"MM/D/YY h:mmA", // Example: 12/5/23 9:00AM
|
||||||
"M/D/YY h:mm:ssA",
|
"MM/D/YY h A", // Example: 12/5/23 9 AM
|
||||||
"M/DD/YY h:mm:ssA",
|
"MM/D/YY hA", // Example: 12/5/23 9AM
|
||||||
"MM/D/YY h:mm:ssA",
|
"MM/D/YY hh:mm A", // Example: 12/5/23 02:25 PM
|
||||||
"MM/DD/YY h:mm:ssA",
|
"MM/D/YY hh:mm:ss A", // Example: 12/5/23 02:25:45 PM
|
||||||
"M/D/YYYY h:mm:ssA",
|
|
||||||
"M/DD/YYYY h:mm:ssA",
|
|
||||||
"MM/D/YYYY h:mm:ssA",
|
|
||||||
"MM/DD/YYYY h:mm:ssA",
|
|
||||||
|
|
||||||
"MMDDYY h:mm:ss a",
|
"M/DD/YY h:mm A", // Example: 1/25/23 9:00 AM
|
||||||
"MMDDYYYY h:mm:ss a",
|
"M/DD/YY h:mmA", // Example: 1/25/23 9:00AM
|
||||||
"M/D/YY h:mm:ss a",
|
"M/DD/YY h A", // Example: 1/25/23 9 AM
|
||||||
"M/DD/YY h:mm:ss a",
|
"M/DD/YY hA", // Example: 1/25/23 9AM
|
||||||
"MM/D/YY h:mm:ss a",
|
"M/DD/YY hh:mm A", // Example: 1/25/23 02:25 PM
|
||||||
"MM/DD/YY h:mm:ss a",
|
"M/DD/YY hh:mm:ss A", // Example: 1/25/23 02:25:45 PM
|
||||||
"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",
|
|
||||||
|
|
||||||
"MMDDYY h:mm:ss A",
|
"MM/DD/YY h:mm A", // Example: 12/25/23 9:00 AM
|
||||||
"MMDDYYYY h:mm:ss A",
|
"MM/DD/YY h:mmA", // Example: 12/25/23 9:00AM
|
||||||
"M/D/YY h:mm:ss A",
|
"MM/DD/YY h A", // Example: 12/25/23 9 AM
|
||||||
"M/DD/YY h:mm:ss A",
|
"MM/DD/YY hA", // Example: 12/25/23 9AM
|
||||||
"MM/D/YY h:mm:ss A",
|
"MM/DD/YY hh:mm A", // Example: 12/25/23 02:25 PM
|
||||||
"MM/DD/YY h:mm:ss A",
|
"MM/DD/YY hh:mm:ss A", // Example: 12/25/23 02:25:45 PM
|
||||||
"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",
|
|
||||||
|
|
||||||
"MMDDYY H:mm",
|
// Four-digit year without time
|
||||||
"MMDDYYYY H:mm",
|
"M/D/YYYY", // Example: 1/5/2023
|
||||||
"M/D/YY H:mm",
|
"MM/D/YYYY", // Example: 12/5/2023
|
||||||
"M/DD/YY H:mm",
|
"M/DD/YYYY", // Example: 1/25/2023
|
||||||
"MM/D/YY H:mm",
|
"MM/DD/YYYY", // Example: 12/25/2023
|
||||||
"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",
|
|
||||||
|
|
||||||
"MMDDYY H:mm:ss",
|
// Two-digit year without time
|
||||||
"MMDDYYYY H:mm:ss",
|
"M/D/YY", // Example: 1/5/23
|
||||||
"M/D/YY H:mm:ss",
|
"MM/D/YY", // Example: 12/5/23
|
||||||
"M/DD/YY H:mm:ss",
|
"M/DD/YY", // Example: 1/25/23
|
||||||
"MM/D/YY H:mm:ss",
|
"MM/DD/YY" // Example: 12/25/23
|
||||||
"MM/DD/YY H:mm:ss",
|
|
||||||
"M/D/YYYY H:mm:ss",
|
|
||||||
"MM/D/YYYY H:mm:ss",
|
|
||||||
"MM/DD/YYYY H:mm:ss"
|
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// CONFIRMED
|
||||||
export const dateFormats = [
|
export const dateFormats = [
|
||||||
"MMDDYY",
|
|
||||||
"MMDDYYYY",
|
"MMDDYYYY",
|
||||||
"M/D/YY",
|
"MMDDYY",
|
||||||
"M/DD/YY",
|
// Four-digit year
|
||||||
"MM/D/YY",
|
"M/D/YYYY", // Example: 1/5/2023
|
||||||
"MM/DD/YY",
|
"MM/D/YYYY", // Example: 12/5/2023
|
||||||
"M/D/YYYY",
|
"M/DD/YYYY", // Example: 1/25/2023
|
||||||
"M/DD/YYYY",
|
"MM/DD/YYYY", // Example: 12/25/2023
|
||||||
"MM/D/YYYY",
|
|
||||||
"MM/DD/YYYY"
|
// 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
|
||||||
];
|
];
|
||||||
|
|||||||
Reference in New Issue
Block a user