60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
// /components/main/meldungen/DateRangePickerMeldungen.tsx
|
|
import React from "react";
|
|
import DatePicker from "react-datepicker";
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|
|
|
type Props = {
|
|
fromDate: string;
|
|
toDate: string;
|
|
setFromDate: (val: string) => void;
|
|
setToDate: (val: string) => void;
|
|
};
|
|
|
|
const parseISO = (iso: string) => {
|
|
const [y, m, d] = iso.split("-").map(Number);
|
|
return new Date(y, m - 1, d);
|
|
};
|
|
|
|
const formatDate = (d: Date) => d.toLocaleDateString("sv-SE"); // YYYY-MM-DD
|
|
|
|
const DateRangePickerMeldungen: React.FC<Props> = ({
|
|
fromDate,
|
|
toDate,
|
|
setFromDate,
|
|
setToDate,
|
|
}) => {
|
|
return (
|
|
<div className="flex space-x-4 items-center">
|
|
<div className="flex items-center space-x-2">
|
|
<label className="text-sm font-semibold">Von</label>
|
|
<DatePicker
|
|
selected={parseISO(fromDate)}
|
|
onChange={(date) => date && setFromDate(formatDate(date))}
|
|
selectsStart
|
|
startDate={parseISO(fromDate)}
|
|
endDate={parseISO(toDate)}
|
|
maxDate={new Date()}
|
|
dateFormat="dd.MM.yyyy"
|
|
className="border px-2 py-1 rounded"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<label className="text-sm font-semibold">Bis</label>
|
|
<DatePicker
|
|
selected={parseISO(toDate)}
|
|
onChange={(date) => date && setToDate(formatDate(date))}
|
|
selectsEnd
|
|
startDate={parseISO(fromDate)}
|
|
endDate={parseISO(toDate)}
|
|
maxDate={new Date()}
|
|
dateFormat="dd.MM.yyyy"
|
|
className="border px-2 py-1 rounded"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DateRangePickerMeldungen;
|