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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user