diff --git a/src/features/schedule/components/ScheduleStartPage.tsx b/src/features/schedule/components/ScheduleStartPage.tsx index bfc331a2..a3634e86 100644 --- a/src/features/schedule/components/ScheduleStartPage.tsx +++ b/src/features/schedule/components/ScheduleStartPage.tsx @@ -7,7 +7,7 @@ * @module */ -import { type FC, useState, useCallback, type FormEvent } from "react"; +import { type FC, useState, useCallback, useRef, type FormEvent } from "react"; import { useNavigate } from "@modern-js/runtime/router"; import { useLocale } from "@/i18n/useLocale.js"; import { Calendar } from "primereact/calendar"; @@ -60,6 +60,23 @@ function addDays(base: Date, days: number): Date { return result; } +// Mirrors Angular AppSettings.scheduleSearchFrom (1 day back) and +// scheduleSearchTo (330 days forward). Constrains both the outbound and +// return-flight calendar pickers on the Schedule start page. +function getScheduleMinDate(): Date { + const d = new Date(); + d.setHours(0, 0, 0, 0); + d.setDate(d.getDate() - 1); + return d; +} + +function getScheduleMaxDate(): Date { + const d = new Date(); + d.setHours(0, 0, 0, 0); + d.setDate(d.getDate() + 330); + return d; +} + /** * Transient prefill state handed from a popular-request click via * sessionStorage. Mirrors Angular's `ScheduleFiltersStateService` @@ -109,6 +126,9 @@ export const ScheduleStartPage: FC = () => { const [returnDateTo, setReturnDateTo] = useState(null); const [returnTimeRange, setReturnTimeRange] = useState<[number, number]>([0, 1440]); + const scheduleMinDate = useRef(getScheduleMinDate()).current; + const scheduleMaxDate = useRef(getScheduleMaxDate()).current; + const handleSubmit = useCallback( (e: FormEvent) => { e.preventDefault(); @@ -243,12 +263,15 @@ export const ScheduleStartPage: FC = () => { if (val && val.length >= 2) setDateTo(val[1] ?? null); }} selectionMode="range" + minDate={scheduleMinDate} + maxDate={scheduleMaxDate} dateFormat="dd.mm.yy" placeholder={`${t("SHARED.DATE_FORMAT")} - ${t("SHARED.DATE_FORMAT")}`} showIcon className="input--filter" inputId="schedule-date-from" data-testid="date-range-input" + readOnlyInput /> @@ -295,29 +318,27 @@ export const ScheduleStartPage: FC = () => { {isRoundTrip && ( <> + {/* Angular's schedule-filter renders return dates as a single + calendar-input-week range, not two separate pickers. */}
- + setReturnDateFrom(e.value as Date)} + value={returnDateFrom && returnDateTo ? [returnDateFrom, returnDateTo] : null} + onChange={(e) => { + const val = e.value as Date[] | null; + if (val && val.length >= 1) setReturnDateFrom(val[0] ?? null); + if (val && val.length >= 2) setReturnDateTo(val[1] ?? null); + }} + selectionMode="range" + minDate={scheduleMinDate} + maxDate={scheduleMaxDate} dateFormat="dd.mm.yy" + placeholder={`${t("SHARED.DATE_FORMAT")} - ${t("SHARED.DATE_FORMAT")}`} showIcon className="input--filter" - inputId="schedule-return-date-from" - data-testid="return-date-from-input" - /> -
- -
- - setReturnDateTo(e.value as Date)} - dateFormat="dd.mm.yy" - showIcon - className="input--filter" - inputId="schedule-return-date-to" - data-testid="return-date-to-input" + inputId="schedule-return-date-range" + data-testid="return-date-range-input" + readOnlyInput />