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.

55 lines
1.5 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>
);
};
export const DatePickerInput = ({
value,
onChange,
}) => {
return (
<div className="relative w-full">
<DatePicker
selected={value}
onChange={onChange}
nextMonthButtonLabel=">"
previousMonthButtonLabel="<"
popperClassName="react-datepicker-left"
dateFormat={'dd-MM-yyyy'}
/>
</div>
)
}