c304e9c012
- `useEffect` entfernt, um unnötige `setState`-Aufrufe zu vermeiden - `startDate` und `endDate` werden nun direkt über `useState` aus Redux (`vonDatum`, `bisDatum`) initialisiert - Verhindert unendliche Updates durch sich wiederholende `setStartDate`- und `setEndDate`-Aufrufe - Falls keine Redux-Werte vorhanden sind, wird das aktuelle Datum als Fallback verwendet
76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
// /components/modules/kue705FO/charts/DateRangePicker.tsx
|
|
import React, { useState } from "react";
|
|
import DatePicker from "react-datepicker";
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "../../../../../redux/store";
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|
|
|
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
|
|
);
|
|
|
|
// Direkt mit Redux-Werten initialisieren, falls vorhanden
|
|
const [startDate, setStartDate] = useState<Date>(
|
|
reduxVonDatum ? new Date(reduxVonDatum) : new Date()
|
|
);
|
|
const [endDate, setEndDate] = useState<Date>(
|
|
reduxBisDatum ? new Date(reduxBisDatum) : new Date()
|
|
);
|
|
|
|
return (
|
|
<div className="flex space-x-4">
|
|
<div>
|
|
<label className="block text-sm font-semibold">Von</label>
|
|
<DatePicker
|
|
selected={startDate}
|
|
onChange={(date) => {
|
|
if (date) {
|
|
setStartDate(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) => {
|
|
if (date) {
|
|
setEndDate(date);
|
|
setBisDatum(date);
|
|
}
|
|
}}
|
|
selectsEnd
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
minDate={startDate}
|
|
dateFormat="dd.MM.yyyy"
|
|
className="border px-2 py-1 rounded"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DateRangePicker;
|