gnezim/flights_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ScheduleStartPage: Calendar min/max ±1/+330 days, return dates as single range picker (Angular parity)

Browse Source
This commit is contained in:
Anton
2026-04-20 13:20:29 +03:00
parent 922e41e5c9
commit 02c6003225
1 changed files with 40 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/schedule/components/ScheduleStartPage.tsx
+40 -19
View File
@@ -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<Date | null>(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
/>
</div>
@@ -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. */}
<div className="schedule-start__field">
<label htmlFor="schedule-return-date-from">{t("SHARED.RETURN_FLIGHT_DATE")}</label>
<label htmlFor="schedule-return-date-range">{t("SHARED.RETURN_FLIGHT_DATE")}</label>
<Calendar
value={returnDateFrom}
onChange={(e) => 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"
/>
</div>
<div className="schedule-start__field">
<label htmlFor="schedule-return-date-to">{t("SHARED.RETURN_FLIGHT_TIME")}</label>
<Calendar
value={returnDateTo}
onChange={(e) => 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
/>
</div>