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 today = new Date();
|
||||||
|
|
||||||
const thirtyDaysAgo = new Date();
|
const thirtyDaysAgo = new Date();
|
||||||
thirtyDaysAgo.setDate(today.getDate() - 30);
|
thirtyDaysAgo.setDate(today.getDate() - 30);
|
||||||
|
|
||||||
const sixMonthsAgo = new Date();
|
const sixMonthsAgo = new Date();
|
||||||
sixMonthsAgo.setMonth(today.getMonth() - 6);
|
sixMonthsAgo.setMonth(today.getMonth() - 6);
|
||||||
|
|
||||||
// Redux speichert ISO ("YYYY-MM-DD") → Für DatePicker geeignet
|
|
||||||
const parseISODate = (isoDate: string) => {
|
const parseISODate = (isoDate: string) => {
|
||||||
const [year, month, day] = isoDate.split("-").map(Number);
|
const [year, month, day] = isoDate.split("-").map(Number);
|
||||||
return new Date(year, month - 1, day);
|
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(() => {
|
useEffect(() => {
|
||||||
if (!reduxVonDatum)
|
if (!reduxVonDatum) dispatch(setVonDatum(formatISO(thirtyDaysAgo)));
|
||||||
dispatch(setVonDatum(thirtyDaysAgo.toISOString().split("T")[0]));
|
if (!reduxBisDatum) dispatch(setBisDatum(formatISO(today)));
|
||||||
if (!reduxBisDatum)
|
|
||||||
dispatch(setBisDatum(today.toISOString().split("T")[0]));
|
|
||||||
}, [dispatch, reduxVonDatum, reduxBisDatum]);
|
}, [dispatch, reduxVonDatum, reduxBisDatum]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -46,7 +47,7 @@ const DateRangePicker: React.FC = () => {
|
|||||||
selected={reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo}
|
selected={reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo}
|
||||||
onChange={(date) => {
|
onChange={(date) => {
|
||||||
if (date) {
|
if (date) {
|
||||||
dispatch(setVonDatum(date.toLocaleDateString("sv-SE")));
|
dispatch(setVonDatum(formatISO(date)));
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
selectsStart
|
selectsStart
|
||||||
@@ -54,7 +55,7 @@ const DateRangePicker: React.FC = () => {
|
|||||||
reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo
|
reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo
|
||||||
}
|
}
|
||||||
endDate={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
|
endDate={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
|
||||||
minDate={sixMonthsAgo} // ⬅️ 6 Monate zurück erlaubt
|
minDate={sixMonthsAgo}
|
||||||
maxDate={today}
|
maxDate={today}
|
||||||
dateFormat="dd.MM.yyyy"
|
dateFormat="dd.MM.yyyy"
|
||||||
className="border px-2 py-1 rounded"
|
className="border px-2 py-1 rounded"
|
||||||
@@ -67,7 +68,7 @@ const DateRangePicker: React.FC = () => {
|
|||||||
selected={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
|
selected={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
|
||||||
onChange={(date) => {
|
onChange={(date) => {
|
||||||
if (date) {
|
if (date) {
|
||||||
dispatch(setBisDatum(date.toLocaleDateString("sv-SE")));
|
dispatch(setBisDatum(formatISO(date)));
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
selectsEnd
|
selectsEnd
|
||||||
|
|||||||
@@ -6,5 +6,5 @@
|
|||||||
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
||||||
|
|
||||||
*/
|
*/
|
||||||
const webVersion = "1.6.214";
|
const webVersion = "1.6.215";
|
||||||
export default webVersion;
|
export default webVersion;
|
||||||
|
|||||||
Reference in New Issue
Block a user