admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Enhance Date Time Picker

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-08-20 13:24:26 -04:00
parent 82ecb5533f
commit 51d264098c
28 changed files with 271 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,45 +1,204 @@
import React, { forwardRef } from "react";
//import DatePicker from "react-datepicker";
//import "react-datepicker/src/stylesheets/datepicker.scss";
import { Space, TimePicker } from "antd";
import React, { forwardRef, useState } from "react";
import { DatePicker } from "antd";
import dayjs from "../../utils/day";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
//To be used as a form element only.
const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, ...restProps }, ref) => {
// const handleChange = (newDate) => {
// if (value !== newDate && onChange) {
// onChange(newDate);
// }
// };
// To be used as a form element only.
const DateTimePicker = (
{ value, onChange, onBlur, id, onlyFuture, onlyToday, isDateOnly = false, ...restProps },
ref
) => {
const [isManualInput, setIsManualInput] = useState(false);
const handleChange = (newDate) => {
if (newDate && onChange) {
onChange(newDate);
}
setIsManualInput(false); // Reset the manual input flag when using GUI
};
const handleKeyDown = (e) => {
setIsManualInput(true); // User is typing, so set the manual input flag
if (e.key.toLowerCase() === "t") {
if (onChange) {
onChange(dayjs());
}
} else if (e.key.toLowerCase() === "enter") {
handleBlur(e);
}
};
const handleBlur = (e) => {
if (!isManualInput) {
// If the input is not manual, skip the format processing
return;
}
setIsManualInput(false); // Reset the flag after processing
const v = e.target.value;
if (!v) return;
// Convert input to uppercase to handle 'am/pm' as well as 'AM/PM'
const upperV = v.toUpperCase();
let _a;
// Handling common shorthand datetime inputs
const shorthandFormats = [
"M/D/YY hA",
"M/D/YY h:mmA",
"M/D/YYYY hA",
"M/D/YYYY h:mmA",
"M/D/YY ha",
"M/D/YY h:mma",
"M/D/YYYY ha",
"M/D/YYYY h:mma"
];
for (let format of shorthandFormats) {
_a = dayjs(upperV, format);
if (_a.isValid()) break;
}
// If shorthand parsing didn't work, fall back to existing formats
if (!_a || !_a.isValid()) {
const formats = [
"MMDDYY",
"MMDDYYYY",
"MM/DD/YY",
"MM/DD/YYYY",
"M/DD/YY",
"M/DD/YYYY",
"MM/D/YY",
"MM/D/YYYY",
"M/D/YY",
"M/D/YYYY",
"D/MM/YY",
"D/MM/YYYY",
"DD/M/YY",
"DD/M/YYYY",
"D/M/YY",
"D/M/YYYY",
"MMDDYY hh:mm A",
"MMDDYYYY hh:mm A",
"MM/DD/YY hh:mm A",
"MM/DD/YYYY hh:mm A",
"M/DD/YY hh:mm A",
"M/DD/YYYY hh:mm A",
"MM/D/YY hh:mm A",
"MM/D/YYYY hh:mm A",
"M/D/YY hh:mm A",
"M/D/YYYY hh:mm A",
"D/MM/YY hh:mm A",
"D/MM/YYYY hh:mm A",
"DD/M/YY hh:mm A",
"DD/M/YYYY hh:mm A",
"D/M/YY hh:mm A",
"D/M/YYYY hh:mm A",
"MMDDYY hh:mm:ss A",
"MMDDYYYY hh:mm:ss A",
"MM/DD/YY hh:mm:ss A",
"MM/DD/YYYY hh:mm:ss A",
"M/DD/YY hh:mm:ss A",
"M/DD/YYYY hh:mm:ss A",
"MM/D/YY hh:mm:ss A",
"MM/D/YYYY hh:mm:ss A",
"M/D/YY hh:mm:ss A",
"M/D/YYYY hh:mm:ss A",
"D/MM/YY hh:mm:ss A",
"D/MM/YYYY hh:mm:ss A",
"DD/M/YY hh:mm:ss A",
"DD/M/YYYY hh:mm:ss A",
"D/M/YY hh:mm:ss A",
"D/M/YYYY hh:mm:ss A",
"MMDDYY HH:mm",
"MMDDYYYY HH:mm",
"MM/DD/YY HH:mm",
"MM/DD/YYYY HH:mm",
"M/DD/YY HH:mm",
"M/DD/YYYY HH:mm",
"MM/D/YY HH:mm",
"MM/D/YYYY HH:mm",
"M/D/YY HH:mm",
"M/D/YYYY HH:mm",
"D/MM/YY HH:mm",
"D/MM/YYYY HH:mm",
"DD/M/YY HH:mm",
"DD/M/YYYY HH:mm",
"D/M/YY HH:mm",
"D/M/YYYY HH:mm",
"MMDDYY HH:mm:ss",
"MMDDYYYY HH:mm:ss",
"MM/DD/YY HH:mm:ss",
"MM/DD/YYYY HH:mm:ss",
"M/DD/YY HH:mm:ss",
"M/DD/YYYY HH:mm:ss",
"MM/D/YY HH:mm:ss",
"MM/D/YYYY HH:mm:ss",
"M/D/YY HH:mm:ss",
"M/D/YYYY HH:mm:ss",
"D/MM/YY HH:mm:ss",
"D/MM/YYYY HH:mm:ss",
"DD/M/YY HH:mm:ss",
"DD/M/YYYY HH:mm:ss",
"D/M/YY HH:mm:ss",
"D/M/YYYY HH:mm:ss"
];
for (let format of formats) {
_a = dayjs(upperV, format);
if (_a.isValid()) break;
}
}
if (_a && _a.isValid()) {
if (isDateOnly) {
_a = _a.startOf("day"); // Only apply startOf("day") when isDateOnly is true
}
if (value && value.isValid && value.isValid()) {
_a.set({
hours: value.hours(),
minutes: value.minutes(),
seconds: value.seconds(),
milliseconds: value.milliseconds()
});
}
if (onlyFuture) {
if (dayjs().subtract(1, "day").isBefore(_a)) {
onChange(_a);
} else {
onChange(dayjs().startOf("day"));
}
} else {
onChange(_a);
}
}
};
return (
<Space direction="vertical" style={{ width: "100%" }} id={id}>
<FormDatePicker
{...restProps}
{...(onlyFuture && {
disabledDate: (d) => dayjs().subtract(1, "day").isAfter(d)
})}
value={value}
onBlur={onBlur}
onChange={onChange}
onlyFuture={onlyFuture}
isDateOnly={false}
/>
<TimePicker
<div onKeyDown={handleKeyDown} id={id} style={{ width: "100%" }}>
<DatePicker
ref={ref}
showTime={isDateOnly ? false : { format: "hh:mm a", minuteStep: 15 }}
format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
value={value ? dayjs(value) : null}
{...(onlyFuture && {
disabledDate: (d) => dayjs().isAfter(d)
})}
onChange={onChange}
disableSeconds={true}
minuteStep={15}
onBlur={onBlur}
format="hh:mm a"
onChange={handleChange}
onBlur={onBlur || handleBlur}
disabledDate={(d) => {
if (onlyToday) {
return !dayjs().isSame(d, "day");
} else if (onlyFuture) {
return dayjs().subtract(1, "day").isAfter(d);
}
return false;
}}
{...restProps}
/>
</Space>
</div>
);
};