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.
36 lines
980 B
React
36 lines
980 B
React
2 years ago
|
import React, { useEffect } from "react";
|
||
|
import DatePicker from "react-datepicker";
|
||
|
|
||
|
export const DatePickerRangeInput = ({
|
||
|
startDate,
|
||
|
setStartDate,
|
||
|
endDate,
|
||
|
setEndDate,
|
||
|
}) => {
|
||
|
|
||
|
if(typeof(endDate) === 'string') {
|
||
|
endDate = new Date(endDate)
|
||
|
}
|
||
|
|
||
|
return (
|
||
|
<div className="flex space-x-1">
|
||
|
<div className="relative">
|
||
|
<DatePicker
|
||
|
selected={startDate}
|
||
|
onChange={(dates) => {
|
||
|
const [start, end] = dates;
|
||
|
setStartDate(start);
|
||
|
setEndDate(end);
|
||
|
}}
|
||
|
selectsRange
|
||
|
startDate={startDate}
|
||
|
endDate={endDate}
|
||
|
nextMonthButtonLabel=">"
|
||
|
previousMonthButtonLabel="<"
|
||
|
popperClassName="react-datepicker-left"
|
||
|
/>
|
||
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
};
|