68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
// /components/modules/kue705FO/charts/DateRangePicker.tsx
|
|
// /components/modules/kue705FO/charts/DateRangePicker.tsx
|
|
import React from "react";
|
|
import DatePicker from "react-datepicker";
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "../../../../../redux/store";
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|
|
|
// ✅ Props-Definition für die Komponente hinzugefügt
|
|
interface DateRangePickerProps {
|
|
setVonDatum: (date: Date) => void;
|
|
setBisDatum: (date: Date) => void;
|
|
}
|
|
|
|
const DateRangePicker: React.FC<DateRangePickerProps> = ({
|
|
setVonDatum,
|
|
setBisDatum,
|
|
}) => {
|
|
// Redux-Werte abrufen
|
|
const reduxVonDatum = useSelector(
|
|
(state: RootState) => state.kabelueberwachungChart.vonDatum
|
|
);
|
|
const reduxBisDatum = useSelector(
|
|
(state: RootState) => state.kabelueberwachungChart.bisDatum
|
|
);
|
|
|
|
return (
|
|
<div className="flex space-x-4">
|
|
<div>
|
|
<label className="block text-sm font-semibold">Von</label>
|
|
<DatePicker
|
|
selected={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
|
|
onChange={(date) => {
|
|
if (date) {
|
|
setVonDatum(date);
|
|
}
|
|
}}
|
|
selectsStart
|
|
startDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
|
|
endDate={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
|
|
dateFormat="dd.MM.yyyy"
|
|
className="border px-2 py-1 rounded"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-semibold">Bis</label>
|
|
<DatePicker
|
|
selected={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
|
|
onChange={(date) => {
|
|
if (date) {
|
|
setBisDatum(date);
|
|
}
|
|
}}
|
|
selectsEnd
|
|
startDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
|
|
endDate={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
|
|
minDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
|
|
dateFormat="dd.MM.yyyy"
|
|
className="border px-2 py-1 rounded"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DateRangePicker;
|