Show 'Сегодня' in filter date field when the selected date is today

Angular's search filter rewrites the 'Дата рейса' input value to the
translated 'Сегодня' label whenever the picked date equals today,
matching the 'Сегодня' that appears in the H1 and SEO strings. React
was showing the raw 'DD.MM.YYYY' even when today, so the filter read
clinical next to the warm page heading.

PrimeReact's Calendar doesn't support a custom display formatter, but
exposes an inputRef. Wire one up on both Calendar instances (flight
number tab + route tab) and rewrite the DOM value to SHARED.TODAY
whenever flightDate / routeDate is today. The ref update runs on
every mount + date change, so navigating between tabs also gets it
right.
This commit is contained in:
2026-04-19 13:50:37 +03:00
parent eea8d92212
commit f50a0d5b33
@@ -61,6 +61,15 @@ function yyyymmddToDate(yyyymmdd: string): Date {
return new Date(y, m, d);
}
function isSameLocalDay(a: Date | null, b: Date | null): boolean {
if (!a || !b) return false;
return (
a.getFullYear() === b.getFullYear() &&
a.getMonth() === b.getMonth() &&
a.getDate() === b.getDate()
);
}
export const OnlineBoardFilter: FC<OnlineBoardFilterProps> = ({
initialDeparture,
initialArrival,
@@ -91,6 +100,24 @@ export const OnlineBoardFilter: FC<OnlineBoardFilterProps> = ({
);
const [timeRange, setTimeRange] = useState<[number, number]>([0, 1440]);
// Swap the Calendar input's display text to the translated 'Сегодня'
// label when the selected date is today — Angular ships this in its
// date field and the raw 'DD.MM.YYYY' reads clinical in comparison.
const flightDateInputRef = useRef<HTMLInputElement>(null);
const routeDateInputRef = useRef<HTMLInputElement>(null);
const todayLabel = t("SHARED.TODAY");
useEffect(() => {
const today = new Date();
const apply = (ref: HTMLInputElement | null, date: Date | null) => {
if (!ref) return;
if (isSameLocalDay(date, today)) {
ref.value = todayLabel;
}
};
apply(flightDateInputRef.current, flightDate);
apply(routeDateInputRef.current, routeDate);
}, [flightDate, routeDate, todayLabel, activeTab]);
// When the parent feeds new initial* props (e.g. a popular-request click
// pushes ?departure=SVO&arrival=LED into the URL), keep the fields in
// sync. useState only reads initial values once, so without this effect
@@ -256,6 +283,7 @@ export const OnlineBoardFilter: FC<OnlineBoardFilterProps> = ({
className="input--filter"
data-testid="date-input"
inputId="search-date-input"
inputRef={flightDateInputRef}
/>
</div>
</div>
@@ -344,6 +372,7 @@ export const OnlineBoardFilter: FC<OnlineBoardFilterProps> = ({
className="input--filter"
data-testid="date-input"
inputId="route-date-input"
inputRef={routeDateInputRef}
/>
</div>
</div>