Replace native date inputs with PrimeReact Calendar component

2026-04-15 20:09:49 +03:00
parent fb64095a63
commit 2f1aacea4f
2 changed files with 65 additions and 83 deletions
@@ -8,29 +8,20 @@

 import { type FC, useState, useCallback, type FormEvent } from "react";
 import { useNavigate, useParams } from "@modern-js/runtime/router";
+import { Calendar } from "primereact/calendar";
 import { useTranslation } from "@/i18n/provider.js";
 import { buildOnlineBoardUrl } from "../url.js";
 import "./OnlineBoardFilter.scss";

 type FilterTab = "flight" | "route" | null;

-function todayAsYyyymmdd(): string {
-  const now = new Date();
-  const y = now.getFullYear().toString();
-  const m = (now.getMonth() + 1).toString().padStart(2, "0");
-  const d = now.getDate().toString().padStart(2, "0");
+function dateToYyyymmdd(value: Date): string {
+  const y = value.getFullYear().toString();
+  const m = (value.getMonth() + 1).toString().padStart(2, "0");
+  const d = value.getDate().toString().padStart(2, "0");
  return `${y}${m}${d}`;
 }

-function dateInputToYyyymmdd(value: string): string {
-  return value.replace(/-/g, "");
-}
-
-function yyyymmddToDateInput(value: string): string {
-  if (value.length !== 8) return "";
-  return `${value.slice(0, 4)}-${value.slice(4, 6)}-${value.slice(6, 8)}`;
-}
-
 export const OnlineBoardFilter: FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
@@ -41,16 +32,12 @@ export const OnlineBoardFilter: FC = () => {

  // Flight number fields
  const [flightNumber, setFlightNumber] = useState("");
-  const [flightDate, setFlightDate] = useState(
-    yyyymmddToDateInput(todayAsYyyymmdd()),
-  );
+  const [flightDate, setFlightDate] = useState<Date>(new Date());

  // Route fields
  const [departureAirport, setDepartureAirport] = useState("");
  const [arrivalAirport, setArrivalAirport] = useState("");
-  const [routeDate, setRouteDate] = useState(
-    yyyymmddToDateInput(todayAsYyyymmdd()),
-  );
+  const [routeDate, setRouteDate] = useState<Date>(new Date());

  const handleTabClick = useCallback(
    (tab: FilterTab) => {
@@ -62,8 +49,8 @@ export const OnlineBoardFilter: FC = () => {
  const handleFlightSubmit = useCallback(
    (e: FormEvent) => {
      e.preventDefault();
-      const dateParam = dateInputToYyyymmdd(flightDate);
-      if (dateParam.length !== 8) return;
+      if (!flightDate) return;
+      const dateParam = dateToYyyymmdd(flightDate);
      if (!flightNumber.trim()) return;

      const cleaned = flightNumber.trim().replace(/\s+/g, "");
@@ -85,8 +72,8 @@ export const OnlineBoardFilter: FC = () => {
  const handleRouteSubmit = useCallback(
    (e: FormEvent) => {
      e.preventDefault();
-      const dateParam = dateInputToYyyymmdd(routeDate);
-      if (dateParam.length !== 8) return;
+      if (!routeDate) return;
+      const dateParam = dateToYyyymmdd(routeDate);
      if (!departureAirport.trim() || !arrivalAirport.trim()) return;

      const url = buildOnlineBoardUrl({
@@ -155,11 +142,12 @@ export const OnlineBoardFilter: FC = () => {
                    <label className="label--filter">
                      {t("SHARED.FLIGHT_DATE")}
                    </label>
-                    <input
-                      type="date"
-                      className="input--filter input--calendar"
+                    <Calendar
                      value={flightDate}
-                      onChange={(e) => setFlightDate(e.target.value)}
+                      onChange={(e) => setFlightDate(e.value as Date)}
+                      dateFormat="dd.mm.yy"
+                      showIcon
+                      className="input--filter"
                      data-testid="flight-date-input"
                    />
                  </div>
@@ -238,11 +226,12 @@ export const OnlineBoardFilter: FC = () => {
                    <label className="label--filter">
                      {t("SHARED.DEPARTURE_DATE")}
                    </label>
-                    <input
-                      type="date"
-                      className="input--filter input--calendar"
+                    <Calendar
                      value={routeDate}
-                      onChange={(e) => setRouteDate(e.target.value)}
+                      onChange={(e) => setRouteDate(e.value as Date)}
+                      dateFormat="dd.mm.yy"
+                      showIcon
+                      className="input--filter"
                      data-testid="route-date-input"
                    />
                  </div>
@@ -9,6 +9,7 @@

 import { type FC, useState, useCallback, type FormEvent } from "react";
 import { useNavigate, useParams } from "@modern-js/runtime/router";
+import { Calendar } from "primereact/calendar";
 import { useTranslation } from "@/i18n/provider.js";
 import { PageLayout } from "@/ui/layout/PageLayout.js";
 import { PageTabs } from "@/ui/layout/PageTabs.js";
@@ -17,33 +18,17 @@ import type { PopularRequest } from "@/features/popular-requests/types.js";
 import { buildScheduleUrl } from "../url.js";
 import "./ScheduleStartPage.scss";

-/**
- * Format today's date as yyyyMMdd.
- */
-function todayAsYyyymmdd(): string {
-  const now = new Date();
-  const y = now.getFullYear().toString();
-  const m = (now.getMonth() + 1).toString().padStart(2, "0");
-  const d = now.getDate().toString().padStart(2, "0");
+function dateToYyyymmdd(value: Date): string {
+  const y = value.getFullYear().toString();
+  const m = (value.getMonth() + 1).toString().padStart(2, "0");
+  const d = value.getDate().toString().padStart(2, "0");
  return `${y}${m}${d}`;
 }

-function dateInputToYyyymmdd(value: string): string {
-  return value.replace(/-/g, "");
-}
-
-function yyyymmddToDateInput(value: string): string {
-  if (value.length !== 8) return "";
-  return `${value.slice(0, 4)}-${value.slice(4, 6)}-${value.slice(6, 8)}`;
-}
-
-function addDaysToDateInput(value: string, days: number): string {
-  const date = new Date(value);
-  date.setDate(date.getDate() + days);
-  const y = date.getFullYear().toString();
-  const m = (date.getMonth() + 1).toString().padStart(2, "0");
-  const d = date.getDate().toString().padStart(2, "0");
-  return `${y}-${m}-${d}`;
+function addDays(base: Date, days: number): Date {
+  const result = new Date(base);
+  result.setDate(result.getDate() + days);
+  return result;
 }

 export const ScheduleStartPage: FC = () => {
@@ -52,15 +37,15 @@ export const ScheduleStartPage: FC = () => {
  const routeParams = useParams<{ lang: string }>();
  const lang = routeParams.lang ?? "ru";

-  const today = yyyymmddToDateInput(todayAsYyyymmdd());
+  const today = new Date();

  const [departureAirport, setDepartureAirport] = useState("");
  const [arrivalAirport, setArrivalAirport] = useState("");
-  const [dateFrom, setDateFrom] = useState(today);
-  const [dateTo, setDateTo] = useState(addDaysToDateInput(today, 7));
+  const [dateFrom, setDateFrom] = useState<Date>(today);
+  const [dateTo, setDateTo] = useState<Date>(addDays(today, 7));
  const [isRoundTrip, setIsRoundTrip] = useState(false);
-  const [returnDateFrom, setReturnDateFrom] = useState(addDaysToDateInput(today, 7));
-  const [returnDateTo, setReturnDateTo] = useState(addDaysToDateInput(today, 14));
+  const [returnDateFrom, setReturnDateFrom] = useState<Date>(addDays(today, 7));
+  const [returnDateTo, setReturnDateTo] = useState<Date>(addDays(today, 14));

  const handleSubmit = useCallback(
    (e: FormEvent) => {
@@ -70,16 +55,16 @@ export const ScheduleStartPage: FC = () => {
      const arr = arrivalAirport.trim().toUpperCase();
      if (!dep || !arr) return;

-      const dateFromParam = dateInputToYyyymmdd(dateFrom);
-      const dateToParam = dateInputToYyyymmdd(dateTo);
-      if (dateFromParam.length !== 8 || dateToParam.length !== 8) return;
+      if (!dateFrom || !dateTo) return;
+      const dateFromParam = dateToYyyymmdd(dateFrom);
+      const dateToParam = dateToYyyymmdd(dateTo);

      let url: string;

      if (isRoundTrip) {
-        const retDateFromParam = dateInputToYyyymmdd(returnDateFrom);
-        const retDateToParam = dateInputToYyyymmdd(returnDateTo);
-        if (retDateFromParam.length !== 8 || retDateToParam.length !== 8) return;
+        if (!returnDateFrom || !returnDateTo) return;
+        const retDateFromParam = dateToYyyymmdd(returnDateFrom);
+        const retDateToParam = dateToYyyymmdd(returnDateTo);

        url = buildScheduleUrl({
          type: "roundtrip",
@@ -136,22 +121,26 @@ export const ScheduleStartPage: FC = () => {

      <div className="schedule-start__field">
        <label htmlFor="schedule-date-from">Date from</label>
-        <input
-          id="schedule-date-from"
-          type="date"
+        <Calendar
          value={dateFrom}
-          onChange={(e) => setDateFrom(e.target.value)}
+          onChange={(e) => setDateFrom(e.value as Date)}
+          dateFormat="dd.mm.yy"
+          showIcon
+          className="input--filter"
+          inputId="schedule-date-from"
          data-testid="date-from-input"
        />
      </div>

      <div className="schedule-start__field">
        <label htmlFor="schedule-date-to">Date to</label>
-        <input
-          id="schedule-date-to"
-          type="date"
+        <Calendar
          value={dateTo}
-          onChange={(e) => setDateTo(e.target.value)}
+          onChange={(e) => setDateTo(e.value as Date)}
+          dateFormat="dd.mm.yy"
+          showIcon
+          className="input--filter"
+          inputId="schedule-date-to"
          data-testid="date-to-input"
        />
      </div>
@@ -172,22 +161,26 @@ export const ScheduleStartPage: FC = () => {
        <>
          <div className="schedule-start__field">
            <label htmlFor="schedule-return-date-from">Return date from</label>
-            <input
-              id="schedule-return-date-from"
-              type="date"
+            <Calendar
              value={returnDateFrom}
-              onChange={(e) => setReturnDateFrom(e.target.value)}
+              onChange={(e) => setReturnDateFrom(e.value as Date)}
+              dateFormat="dd.mm.yy"
+              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">Return date to</label>
-            <input
-              id="schedule-return-date-to"
-              type="date"
+            <Calendar
              value={returnDateTo}
-              onChange={(e) => setReturnDateTo(e.target.value)}
+              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"
            />
          </div>