- Final DateTimePicker update
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
|
||||
import React, { useCallback, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import dayjs from "../../utils/day";
|
||||
import { dateFormats, dateTimeFormats } from "./formats.js";
|
||||
import { fuzzyMatchDate } from "./formats.js";
|
||||
|
||||
const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, isDateOnly = false, ...restProps }) => {
|
||||
const [isManualInput, setIsManualInput] = useState(false);
|
||||
@@ -11,79 +11,34 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, is
|
||||
|
||||
const handleChange = useCallback(
|
||||
(newDate) => {
|
||||
if (newDate === null && onChange) {
|
||||
onChange(null);
|
||||
} else if (newDate && onChange) {
|
||||
onChange(newDate);
|
||||
if (onChange) {
|
||||
onChange(newDate || null);
|
||||
}
|
||||
setIsManualInput(false);
|
||||
},
|
||||
[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) => {
|
||||
// Bail if this is not a manual input
|
||||
if (!isManualInput) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Reset manual input flag
|
||||
setIsManualInput(false);
|
||||
|
||||
const v = e.target.value;
|
||||
const v = e?.target?.value;
|
||||
|
||||
if (!v) return;
|
||||
|
||||
const upperV = normalizeDateTimeString(v);
|
||||
let parsedDate;
|
||||
let parsedDate = isDateOnly ? fuzzyMatchDate(v)?.startOf("day") : fuzzyMatchDate(v);
|
||||
|
||||
for (const format of isDateOnly ? dateFormats : dateTimeFormats) {
|
||||
parsedDate = dayjs(upperV, format);
|
||||
if (parsedDate.isValid()) break;
|
||||
}
|
||||
|
||||
if (parsedDate && parsedDate.isValid()) {
|
||||
if (isDateOnly) {
|
||||
parsedDate = parsedDate.startOf("day");
|
||||
}
|
||||
|
||||
if (value && value.isValid && value.isValid()) {
|
||||
parsedDate = parsedDate.set({
|
||||
hours: value.hours(),
|
||||
minutes: value.minutes(),
|
||||
seconds: value.seconds(),
|
||||
milliseconds: value.milliseconds()
|
||||
});
|
||||
}
|
||||
|
||||
if (onlyFuture) {
|
||||
if (dayjs().subtract(1, "day").isBefore(parsedDate)) {
|
||||
onChange(parsedDate);
|
||||
} else {
|
||||
onChange(dayjs().startOf("day"));
|
||||
}
|
||||
} else {
|
||||
onChange(parsedDate);
|
||||
}
|
||||
if (parsedDate && onChange) {
|
||||
onChange(parsedDate);
|
||||
}
|
||||
},
|
||||
[isManualInput, isDateOnly, onlyFuture, onChange, value]
|
||||
[isManualInput, isDateOnly, onChange]
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
|
||||
Reference in New Issue
Block a user