117 lines
3.6 KiB
JavaScript
117 lines
3.6 KiB
JavaScript
import {DatePicker} from "antd";
|
|
import dayjs from "../../utils/day";
|
|
import React, {useRef} from "react";
|
|
|
|
import {connect} from "react-redux";
|
|
import {createStructuredSelector} from "reselect";
|
|
import {selectBodyshop} from "../../redux/user/user.selectors";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
|
});
|
|
export default connect(mapStateToProps, mapDispatchToProps)(FormDatePicker);
|
|
|
|
const dateFormat = "MM/DD/YYYY";
|
|
|
|
export function FormDatePicker({
|
|
bodyshop,
|
|
value,
|
|
onChange,
|
|
onBlur,
|
|
onlyFuture,
|
|
onlyToday,
|
|
isDateOnly = true,
|
|
...restProps
|
|
}) {
|
|
const ref = useRef();
|
|
|
|
const handleChange = (newDate) => {
|
|
if (value !== newDate && onChange) {
|
|
onChange(isDateOnly ? newDate && newDate.format("YYYY-MM-DD") : newDate);
|
|
}
|
|
};
|
|
|
|
const handleKeyDown = (e) => {
|
|
if (e.key.toLowerCase() === "t") {
|
|
if (onChange) {
|
|
onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
|
|
}
|
|
} else if (e.key.toLowerCase() === "enter") {
|
|
if (ref.current && ref.current.blur) ref.current.blur();
|
|
}
|
|
};
|
|
|
|
const handleBlur = (e) => {
|
|
const v = e.target.value;
|
|
if (!v) return;
|
|
|
|
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"
|
|
];
|
|
|
|
let _a;
|
|
|
|
// Iterate through formats to find the correct one
|
|
for (let format of formats) {
|
|
_a = dayjs(v, format);
|
|
if (v === _a.format(format)) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (
|
|
_a.isValid()
|
|
&& value
|
|
&& value.isValid
|
|
&& value.isValid()
|
|
) {
|
|
_a.set({
|
|
hours: value.hours(),
|
|
minutes: value.minutes(),
|
|
seconds: value.seconds(),
|
|
milliseconds: value.milliseconds(),
|
|
});
|
|
}
|
|
|
|
if (_a.isValid() && onChange) {
|
|
if (onlyFuture) {
|
|
if (dayjs().subtract(1, "day").isBefore(_a)) {
|
|
onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
|
|
} else {
|
|
onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
|
|
}
|
|
} else {
|
|
onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div onKeyDown={handleKeyDown}>
|
|
<DatePicker
|
|
ref={ref}
|
|
value={value ? dayjs(value) : null}
|
|
onChange={handleChange}
|
|
format={dateFormat}
|
|
onBlur={onBlur || handleBlur}
|
|
showToday={false}
|
|
disabledTime
|
|
disabledDate={(d) => {
|
|
if (onlyToday) {
|
|
return !dayjs().isSame(d, 'day');
|
|
} else if (onlyFuture) {
|
|
return dayjs().subtract(1, "day").isAfter(d);
|
|
}
|
|
}}
|
|
{...restProps}
|
|
/>
|
|
</div>
|
|
);
|
|
} |