Date Range Picker Example using React Date Range [Customized]


import “react-date-range/dist/styles.css”; // main css file

import “react-date-range/dist/theme/default.css”; // theme css file

import { DateRange } from “react-date-range”;

import { Box, TextField, ClickAwayListener } from “@mui/material”;

import moment from “moment”;

import { useState, useEffect, useRef } from “react”;

const PickDates = () => {

const pickerStyles = {

boxShadow: “0px 2px 10px rgba(0, 0, 0, 0.15)”,

//TO HIDE MONTH AND YEAR DROPDOWN

“.rdrMonthAndYearPickers”: {

display: “none”

},

//TO HIDE THE DEFAULT DATE TEXT FIELDS PROVIDED BY THIS PACKAGE

“.rdrDateDisplayWrapper”: {

display: “none”

},

//TO ALIGN MONTH ARROW WITH MONTH NAME

“.rdrMonthAndYearWrapper”: {

alignItems: “unset”,

height: “0px”,

paddingTop: “20px”

},

//TO ALIGN CENTER MONTH AND YEAR NAME

“.rdrMonthName”: {

textAlign: “center”,

fontSize: “16px”

},

“.rdrWeekDays”: {

fontSize: “14px”

},

//TO CHANGE THE RANGE BACKGROUND COLOR

“.rdrInRange”: {

backgroundColor: “#3C4F5D”

},

//FOR RESPONSIVE DESIGN(SMALL DEVICES)

“@media (max-width: 600px)”: {

“.rdrMonth,.rdrCalendarWrapper”: {

width: “100%”,

padding: 0

},

“.rdrWeekDays”: {

marginTop: “24px”

},

width: “100%”

}

};

const [range, setRange] = useState({

startDate: null,

endDate: new Date(“”), // This is required to overcome the bug of auto-range-selection

key: “selection”

});

const [showCalendar, setCalendarStatus] = useState(false);

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.startDate).format(“YYYY-MM-DD”) === “Invalid date”

? “”

: moment(range.startDate).format(“YYYY-MM-DD”)

);

setEndDate(

moment(range.endDate).format(“YYYY-MM-DD”) === “Invalid date”

? “”

: moment(range.endDate).format(“YYYY-MM-DD”)

);

}, [range]);

const handleChange = (item) => {

const { startDate, endDate } = item.selection;

if (dateIdentifier === “startDate”) {

//IF USER TRIES TO SELECT START DATE GREATER THAN END DATE

if (range.endDate && startDate > range.endDate) {

setRange((prev) => ({

...prev,

startDate: startDate,

endDate: new Date(“”)

}));

const newStartDate =

item.selection.startDate !== “Invalid date”

? moment(item.selection.startDate).format(“YYYY-MM-DD”)

: null;

setStartDate(newStartDate);

setEndDate(“”);

setDateIdentifier(“endDate”);

if (endDateRef.current) {

endDateRef.current.focus();

}

} else {

setRange((prev) => ({ ...prev, startDate: startDate }));

const newStartDate =

item.selection.startDate !== “Invalid date”

? moment(item.selection.startDate).format(“YYYY-MM-DD”)

: null;

setStartDate(newStartDate);

setDateIdentifier(“endDate”);

if (endDateRef.current) {

endDateRef.current.focus();

}

}

} else if (dateIdentifier === “endDate”) {

if (range.startDate === startDate) {

//IF USER SELECTS THE END DATE EARLIER THAN START DATE

if (range.startDate && endDate < range.startDate) {

setRange((prev) => ({

...prev,

startDate: endDate,

endDate: new Date(“”)

}));

const newStartDate =

item.selection.endDate !== “Invalid Date”

? moment(item.selection.endDate).format(“YYYY-MM-DD”)

: null;

setStartDate(newStartDate);

setEndDate(“”);

if (endDateRef.current) {

endDateRef.current.focus();

}

} else {

setRange((prev) => ({ ...prev, endDate: endDate }));

const newEndDate =

item.selection.endDate !== “Invalid Date”

? moment(item.selection.endDate).format(“YYYY-MM-DD”)

: null;

setEndDate(newEndDate);

setCalendarStatus(false);

}

} else {

// USER CLICKS ON THE END DATE FIELD TO CHANGE THE DATE BUT UPDATED DATE IS COMING IN START DATE FROM PACKAGE

if (range.startDate && startDate < range.startDate) {

setRange((prev) => ({

...prev,

startDate: startDate,

endDate: new Date(“”)

}));

const newStartDate =

item.selection.startDate !== “Invalid Date”

? moment(item.selection.startDate).format(“YYYY-MM-DD”)

: null;

setStartDate(newStartDate);

setEndDate(“”);

if (endDateRef.current) {

endDateRef.current.focus();

}

} else {

setRange((prev) => ({ ...prev, endDate: startDate }));

const newEndDate =

item.selection.startDate !== “Invalid Date”

? moment(item.selection.startDate).format(“YYYY-MM-DD”)

: null;

setEndDate(newEndDate);

}

}

}

};

const handleClickAway = () => {

setCalendarStatus(false);

};

return (

<ClickAwayListener onClickAway={handleClickAway}>

<Box

sx={{

display: “flex”,

flexDirection: “column”,

alignItems: “center”,

justifyContent: “center”

}}

>

<Box

sx={{

display: “flex”,

flexDirection: “row”,

alignItems: “center”,

justifyContent: “center”

}}

>

<TextField

inputRef={startDateRef}

margin=“dense”

label=“Start Date”

value={startDate}

size=“small”

onClick={() => {

setCalendarStatus(true);

setDateIdentifier(“startDate”);

}}

InputProps={{

readOnly: true

}}

/>

<TextField

inputRef={endDateRef}

margin=“dense”

label=“End Date”

value={endDate}

size=“small”

InputProps={{

readOnly: true

}}

onClick={() => {

setCalendarStatus(true);

if (startDate !== “”) {

setDateIdentifier(“endDate”);

} else {

setDateIdentifier(“startDate”);

if (startDateRef.current) {

startDateRef.current.focus();

}

}

}}

/>

</Box>

{showCalendar && (

<Box sx={pickerStyles}>

<DateRange

ranges={[range]}

onChange={(item) => handleChange(item)}

months={2} // CALENDAR WILL SHOW 2 MONTHS VIEW

direction={window.innerWidth <= 600 ? “vertical” : “horizontal”} // FOR SMALL DEVICES CALENDAR WILL BE SHOWN VERTICAL

scroll={{ enabled: window.innerWidth <= 600 ? true : false }}

minDate={new Date()} //USER CANNOT SELECT DATE PRIOR TO TODAY’S DATE

maxDate={moment().add(12, “months”).toDate()} //USER WILL BE ABLE TO SELECT END DATE MAX WITHIN 1 YEAR.

/>

</Box>

)}

</Box>

</ClickAwayListener>

);

};

export default PickDates;



Technology

Another Tech Information

Comments are closed, but trackbacks and pingbacks are open.