You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.1 KiB
JavaScript
38 lines
1.1 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import DatePicker from "react-datepicker";
|
|
|
|
export const DatePickerRangeInput = ({
|
|
startDate,
|
|
endDate,
|
|
setFilterDate
|
|
}) => {
|
|
const [_startDate, setStartDate] = useState(startDate)
|
|
const [_endDate, setEndDate] = useState(typeof(endDate) === 'string' ? new Date(endDate) : endDate)
|
|
|
|
const handleDateChanges = (dates) => {
|
|
const [start, end] = dates;
|
|
setStartDate(start);
|
|
setEndDate(end);
|
|
if (end !== null) {
|
|
setFilterDate(dates)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex space-x-1">
|
|
<div className="relative">
|
|
<DatePicker
|
|
selected={_startDate}
|
|
onChange={handleDateChanges}
|
|
selectsRange
|
|
startDate={_startDate}
|
|
endDate={_endDate}
|
|
nextMonthButtonLabel=">"
|
|
previousMonthButtonLabel="<"
|
|
popperClassName="react-datepicker-left"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|