import “react-date-range/dist/styles.css”; // main CSS file
import “react-date-range/dist/theme/default.css”; // theme CSS file
import { Date range } Since “reaction date range”;
import { Box, Text field, ClickAwayListener } Since “@mui/material”;
import moment Since “moment”;
import { useState, useEffect, useRef } Since “react”;
const Choose dates = () => {
const selectorStyles = {
boxShadow: “0px 2px 10px rgba(0, 0, 0, 0.15)”,
// TO HIDE THE PROGRESS OF THE MONTH AND YEAR
“.rdrMonthAndYearPickers”: {
display: “none”
},
// TO HIDE THE DEFAULT DATE TEXT FIELDS PROVIDED BY THIS PACKAGE
“.rdrDateDisplayWrapper”: {
display: “none”
},
// TO ALIGN THE MONTH ARROW WITH THE NAME OF THE MONTH
“.rdrMonthAndYearWrapper”: {
alignItems: “undefined”,
height: “0px”,
paddingTop: “20px”
},
// TO ALIGN THE NAME OF THE MONTH AND YEAR IN THE CENTER
“.rdrMonthName”: {
textAlign: “center”,
font size: “16px”
},
“.rdrWeekDays”: {
font size: “14px”
},
//TO CHANGE THE BACKGROUND COLOR OF THE RANGE
“.rdrInRange”: {
Background color: “#3C4F5D”
},
//FOR RESPONSIVE DESIGN (SMALL DEVICES)
“@media (maximum width: 600 px)”: {
“.rdrMonth,.rdrCalendarWrapper”: {
width: “100%”,
padding: 0
},
“.rdrWeekDays”: {
marginTop: “24px”
},
width: “100%”
}
};
const [range, setRange] = useState({
start date: null,
End date: new Date(“”), // This is necessary to overcome the automatic range selection bug
key: “selection”
});
const [showCalendar, setCalendarStatus] = useState(FAKE);
const [startDate, setStartDate] = useState(“”);
const [endDate, setEndDate] = useState(“”);
const startDateRef = useRef(null);
const endDateRef = useRef(null);
const [dateIdentifier, setDateIdentifier] = useState(null);
useEffect(() => {
setStartDate(
moment(range.start date).format(“YYYY-MM-DD”) === “Invalid date”
? “”
: moment(range.start date).format(“YYYY-MM-DD”)
);
setEndDate(
moment(range.End date).format(“YYYY-MM-DD”) === “Invalid date”
? “”
: moment(range.End date).format(“YYYY-MM-DD”)
);
}, [range]);
const handleChange = (article) => {
const { start date, End date } = article.selection;
if (dateIdentifier === “start date”) {
//IF THE USER TRYS TO SELECT A START DATE GREATER THAN THE END DATE
if (range.End date && start date > range.End date) {
setRange((previous) => ({
...previous,
start date: start date,
End date: new Date(“”)
}));
const newStartDate =
article.selection.start date !== “Invalid date”
? moment(article.selection.start date).format(“YYYY-MM-DD”)
: null;
setStartDate(newStartDate);
setEndDate(“”);
setDateIdentifier(“End date”);
if (endDateRef.current) {
endDateRef.current.to focus();
}
} other {
setRange((previous) => ({ ...previous, start date: start date }));
const newStartDate =
article.selection.start date !== “Invalid date”
? moment(article.selection.start date).format(“YYYY-MM-DD”)
: null;
setStartDate(newStartDate);
setDateIdentifier(“End date”);
if (endDateRef.current) {
endDateRef.current.to focus();
}
}
} other if (dateIdentifier === “End date”) {
if (range.start date === start date) {
//IF USER SELECTS END DATE BEFORE START DATE
if (range.start date && End date < range.start date) {
setRange((previous) => ({
...previous,
start date: End date,
End date: new Date(“”)
}));
const newStartDate =
article.selection.End date !== “Invalid date”
? moment(article.selection.End date).format(“YYYY-MM-DD”)
: null;
setStartDate(newStartDate);
setEndDate(“”);
if (endDateRef.current) {
endDateRef.current.to focus();
}
} other {
setRange((previous) => ({ ...previous, End date: End date }));
const newEndDate =
article.selection.End date !== “Invalid date”
? moment(article.selection.End date).format(“YYYY-MM-DD”)
: null;
setEndDate(newEndDate);
setCalendarStatus(FAKE);
}
} other {
// USER CLICKS ON THE END DATE FIELD TO CHANGE THE DATE BUT THE UPDATED DATE ARRIVES IN THE START DATE OF THE PACKAGE
if (range.start date && start date < range.start date) {
setRange((previous) => ({
...previous,
start date: start date,
End date: new Date(“”)
}));
const newStartDate =
article.selection.start date !== “Invalid date”
? moment(article.selection.start date).format(“YYYY-MM-DD”)
: null;
setStartDate(newStartDate);
setEndDate(“”);
if (endDateRef.current) {
endDateRef.current.to focus();
}
} other {
setRange((previous) => ({ ...previous, End date: start date }));
const newEndDate =
article.selection.start date !== “Invalid date”
? moment(article.selection.start date).format(“YYYY-MM-DD”)
: null;
setEndDate(newEndDate);
}
}
}
};
const handleClickAway = () => {
setCalendarStatus(FAKE);
};
back (
<ClickAwayListener onClicAway={handleClickAway}>
<Box
sex={{
display: “flex”,
flexDirection: “column”,
alignItems: “center”,
justifyContent: “center”
}}
>
<Box
sex={{
display: “flex”,
flexDirection: “row”,
alignItems: “center”,
justifyContent: “center”
}}
>
<Text field
inputRef={startDateRef}
margin=“dense”
label=“Start date”
value={start date}
size=“little”
onClick={() => {
setCalendarStatus(TRUE);
setDateIdentifier(“start date”);
}}
Entrance props={{
read only: TRUE
}}
/>
<Text field
inputRef={endDateRef}
margin=“dense”
label=“End date”
value={End date}
size=“little”
Entrance props={{
read only: TRUE
}}
onClick={() => {
setCalendarStatus(TRUE);
if (start date !== “”) {
setDateIdentifier(“End date”);
} other {
setDateIdentifier(“start date”);
if (startDateRef.current) {
startDateRef.current.to focus();
}
}
}}
/>
</Box>
{showCalendar && (
<Box sex={selectorStyles}>
<Date range
ranges={[range]}
onChange={(article) => handleChange(article)}
month={2} // THE CALENDAR WILL DISPLAY A 2 MONTH VIEW
direction={window.interior width <= 600 ? “vertical” : “horizontal”} // FOR SMALL DEVICES, THE CALENDAR WILL BE DISPLAYED VERTICAL
roll={{ activated: window.interior width <= 600 ? TRUE : FAKE }}
Min date={new Date()} // USER CANNOT SELECT A DATE BEFORE TODAY’S DATE
datemax={moment().add(12, “month”).to date()} // THE USER WILL BE ABLE TO SELECT THE MAXIMUM END DATE WITHIN ONE YEAR.
/>
</Box>
)}
</Box>
</ClickAwayListener>
);
};
export default Choose dates;
