feat: Initialwerte und Grenzen für DatePicker angepasst
- vonDatum wird beim ersten Laden auf 30 Tage zurück gesetzt - bisDatum ist standardmäßig auf das heutige Datum gesetzt - Auswahlbereich begrenzt auf maximal 6 Monate zurück - Heutiger Tag ist das maximale auswählbare Datum - Datum wird im Format YYYY-MM-DD im Redux gespeichert
This commit is contained in:
@@ -19,23 +19,24 @@ const DateRangePicker: React.FC = () => {
|
||||
);
|
||||
|
||||
const today = new Date();
|
||||
|
||||
const thirtyDaysAgo = new Date();
|
||||
thirtyDaysAgo.setDate(today.getDate() - 30);
|
||||
|
||||
const sixMonthsAgo = new Date();
|
||||
sixMonthsAgo.setMonth(today.getMonth() - 6);
|
||||
|
||||
// Redux speichert ISO ("YYYY-MM-DD") → Für DatePicker geeignet
|
||||
const parseISODate = (isoDate: string) => {
|
||||
const [year, month, day] = isoDate.split("-").map(Number);
|
||||
return new Date(year, month - 1, day);
|
||||
};
|
||||
|
||||
const formatISO = (date: Date) => date.toLocaleDateString("sv-SE"); // = "YYYY-MM-DD"
|
||||
|
||||
// Nur beim ersten Rendern initiale Werte setzen
|
||||
useEffect(() => {
|
||||
if (!reduxVonDatum)
|
||||
dispatch(setVonDatum(thirtyDaysAgo.toISOString().split("T")[0]));
|
||||
if (!reduxBisDatum)
|
||||
dispatch(setBisDatum(today.toISOString().split("T")[0]));
|
||||
if (!reduxVonDatum) dispatch(setVonDatum(formatISO(thirtyDaysAgo)));
|
||||
if (!reduxBisDatum) dispatch(setBisDatum(formatISO(today)));
|
||||
}, [dispatch, reduxVonDatum, reduxBisDatum]);
|
||||
|
||||
return (
|
||||
@@ -46,7 +47,7 @@ const DateRangePicker: React.FC = () => {
|
||||
selected={reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo}
|
||||
onChange={(date) => {
|
||||
if (date) {
|
||||
dispatch(setVonDatum(date.toLocaleDateString("sv-SE")));
|
||||
dispatch(setVonDatum(formatISO(date)));
|
||||
}
|
||||
}}
|
||||
selectsStart
|
||||
@@ -54,7 +55,7 @@ const DateRangePicker: React.FC = () => {
|
||||
reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo
|
||||
}
|
||||
endDate={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
|
||||
minDate={sixMonthsAgo} // ⬅️ 6 Monate zurück erlaubt
|
||||
minDate={sixMonthsAgo}
|
||||
maxDate={today}
|
||||
dateFormat="dd.MM.yyyy"
|
||||
className="border px-2 py-1 rounded"
|
||||
@@ -67,7 +68,7 @@ const DateRangePicker: React.FC = () => {
|
||||
selected={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
|
||||
onChange={(date) => {
|
||||
if (date) {
|
||||
dispatch(setBisDatum(date.toLocaleDateString("sv-SE")));
|
||||
dispatch(setBisDatum(formatISO(date)));
|
||||
}
|
||||
}}
|
||||
selectsEnd
|
||||
|
||||
Reference in New Issue
Block a user