92 lines
2.2 KiB
TypeScript
92 lines
2.2 KiB
TypeScript
import { useState } from "react";
|
|
import { Box, Typography, Paper, Popover } from "@mui/material";
|
|
import { DateRange, Range, DateRangeProps } from "react-date-range";
|
|
import { format } from "date-fns";
|
|
|
|
import "react-date-range/dist/styles.css";
|
|
import "react-date-range/dist/theme/default.css";
|
|
|
|
import "./DateRangePicker.scss";
|
|
|
|
interface IDateRangePickerProps {
|
|
value?: Range[];
|
|
onChange?: (ranges: Range[]) => void;
|
|
}
|
|
|
|
export const DateRangePicker = ({ value, onChange }: IDateRangePickerProps) => {
|
|
const [internalRange, setInternalRange] = useState<Range[]>([
|
|
{
|
|
startDate: new Date(),
|
|
endDate: new Date(),
|
|
key: "selection",
|
|
},
|
|
]);
|
|
|
|
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
|
|
|
|
const range = value ?? internalRange;
|
|
|
|
const handleSelect: DateRangeProps["onChange"] = ranges => {
|
|
if (ranges.selection) {
|
|
const newRange = [ranges.selection];
|
|
if (onChange) {
|
|
onChange(newRange);
|
|
} else {
|
|
setInternalRange(newRange);
|
|
}
|
|
if (ranges.selection.endDate !== ranges.selection.startDate) {
|
|
setAnchorEl(null);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
const open = Boolean(anchorEl);
|
|
const id = open ? "date-range-popover" : undefined;
|
|
|
|
return (
|
|
<Box className="date-range-picker">
|
|
<Popover
|
|
id={id}
|
|
open={open}
|
|
anchorEl={anchorEl}
|
|
onClose={handleClose}
|
|
anchorOrigin={{
|
|
vertical: "bottom",
|
|
horizontal: "left",
|
|
}}
|
|
transformOrigin={{
|
|
vertical: "top",
|
|
horizontal: "left",
|
|
}}
|
|
>
|
|
<Paper>
|
|
<DateRange
|
|
editableDateInputs={true}
|
|
onChange={handleSelect}
|
|
moveRangeOnFirstSelection={false}
|
|
ranges={range}
|
|
/>
|
|
</Paper>
|
|
</Popover>
|
|
|
|
<Box>
|
|
<Typography
|
|
onClick={handleClick}
|
|
className="date-range-picker__date-typo"
|
|
>
|
|
{format(range[0].startDate ?? new Date(), "PPP")} -{" "}
|
|
{format(range[0].endDate ?? new Date(), "PPP")}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|