87 lines
2.1 KiB
JavaScript
87 lines
2.1 KiB
JavaScript
import { DatePicker } from "antd";
|
|
import moment from "moment-timezone";
|
|
import React, { useRef } from "react";
|
|
//To be used as a form element only.
|
|
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
const mapStateToProps = createStructuredSelector({
|
|
//currentUser: selectCurrentUser
|
|
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,
|
|
...restProps
|
|
}) {
|
|
const ref = useRef();
|
|
|
|
const handleChange = (newDate) => {
|
|
if (value !== newDate && onChange) {
|
|
onChange(newDate);
|
|
}
|
|
};
|
|
|
|
const handleKeyDown = (e) => {
|
|
if (e.key.toLowerCase() === "t") {
|
|
if (onChange) {
|
|
onChange(moment());
|
|
// if (ref.current && ref.current.blur) ref.current.blur();
|
|
}
|
|
} 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 _a = moment(
|
|
v,
|
|
["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY"],
|
|
"en",
|
|
false
|
|
);
|
|
|
|
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) onChange(_a);
|
|
};
|
|
|
|
return (
|
|
<div onKeyDown={handleKeyDown}>
|
|
<DatePicker
|
|
ref={ref}
|
|
value={value ? moment(value) : null}
|
|
onChange={handleChange}
|
|
format={dateFormat}
|
|
onBlur={onBlur || handleBlur}
|
|
disabledTime
|
|
{...(onlyFuture && {
|
|
disabledDate: (d) => moment().subtract(1, "day").isAfter(d),
|
|
})}
|
|
{...restProps}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|