From f50a0d5b33db636eebe2a3161adb972dec40233f Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Sun, 19 Apr 2026 13:50:37 +0300
Subject: [PATCH] =?UTF-8?q?Show=20'=D0=A1=D0=B5=D0=B3=D0=BE=D0=B4=D0=BD?=
 =?UTF-8?q?=D1=8F'=20in=20filter=20date=20field=20when=20the=20selected=20?=
 =?UTF-8?q?date=20is=20today?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../components/OnlineBoardFilter.tsx          | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/features/online-board/components/OnlineBoardFilter.tsx b/src/features/online-board/components/OnlineBoardFilter.tsx
index b3ead5b7..98d9e3e8 100644
--- a/src/features/online-board/components/OnlineBoardFilter.tsx
+++ b/src/features/online-board/components/OnlineBoardFilter.tsx
@@ -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>