56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import React, { useState } from "react";
|
|
import DatePicker from "react-datepicker";
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|
|
|
interface DateRangePickerProps {
|
|
setVonDatum: (date: Date) => void;
|
|
setBisDatum: (date: Date) => void;
|
|
}
|
|
|
|
const DateRangePicker: React.FC<DateRangePickerProps> = ({
|
|
setVonDatum,
|
|
setBisDatum,
|
|
}) => {
|
|
const [startDate, setStartDate] = useState<Date | null>(new Date());
|
|
const [endDate, setEndDate] = useState<Date | null>(new Date());
|
|
|
|
return (
|
|
<div className="flex space-x-4">
|
|
<div>
|
|
<label className="block text-sm font-semibold">Von</label>
|
|
<DatePicker
|
|
selected={startDate}
|
|
onChange={(date) => {
|
|
setStartDate(date);
|
|
if (date) setVonDatum(date);
|
|
}}
|
|
selectsStart
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
dateFormat="dd.MM.yyyy"
|
|
className="border px-2 py-1 rounded"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-semibold">Bis</label>
|
|
<DatePicker
|
|
selected={endDate}
|
|
onChange={(date) => {
|
|
setEndDate(date);
|
|
if (date) setBisDatum(date);
|
|
}}
|
|
selectsEnd
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
minDate={startDate || undefined}
|
|
dateFormat="dd.MM.yyyy"
|
|
className="border px-2 py-1 rounded"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DateRangePicker;
|