MaskedDateInput: Pass maxDate into DatePicker; Add interfaces for Driver, DriverLicense, DriverCategory

src/components/MaskedDateInput.tsx

@@ -1,45 +1,42 @@
-import { useEffect, useRef, useState } from "react";
-import {
-    InputBase,
-    ActionIcon,
-    Popover,
-} from "@mantine/core";
-import { IconCalendar } from "@tabler/icons-react";
-import { DatePicker } from "@mantine/dates";
-import dayjs from "dayjs";
+import { useEffect, useRef, useState } from "react"
+import { InputBase, ActionIcon, Popover } from "@mantine/core"
+import { IconCalendar } from "@tabler/icons-react"
+import { DatePicker } from "@mantine/dates"
+import dayjs from "dayjs"
 
-interface Props {
-    value?: Date | null;
-    onChange: (value: Date | null) => void;
-    label?: string;
-    required?: boolean;
-    placeholder?: string;
-    error?: string;
+interface MaskedDateInputProps {
+    value?: Date | null
+    onChange: (value: Date | null) => void
+    label?: string
+    required?: boolean
+    placeholder?: string
+    error?: string
+    maxDate?: Date | undefined
 }
 
-const currentYear = new Date().getFullYear();
+const currentYear = new Date().getFullYear()
 
 function parseDDMMYYYY(input: string): Date | null {
-    const [dd, mm, yyyy] = input.split(".");
-    const day = parseInt(dd, 10);
-    const month = parseInt(mm, 10);
-    const year = parseInt(yyyy, 10);
+    const [dd, mm, yyyy] = input.split(".")
+    const day = parseInt(dd, 10)
+    const month = parseInt(mm, 10)
+    const year = parseInt(yyyy, 10)
 
     if (
         isNaN(day) || isNaN(month) || isNaN(year) ||
         day < 1 || day > 31 ||
         month < 1 || month > 12 ||
-        year < 1900 || year > currentYear
+        year < 1900 //|| year > currentYear
     ) {
-        return null;
+        return null
     }
 
-    const date = dayjs(`${year}-${month}-${day}`, "YYYY-M-D", true);
-    return date.isValid() ? date.toDate() : null;
+    const date = dayjs(`${year}-${month}-${day}`, "YYYY-M-D", true)
+    return date.isValid() ? date.toDate() : null
 }
 
 function formatDDMMYYYY(date: Date): string {
-    return dayjs(date).format("DD.MM.YYYY");
+    return dayjs(date).format("DD.MM.YYYY")
 }
 
 export default function MaskedDateInput({
@@ -49,74 +46,46 @@ export default function MaskedDateInput({
     required,
     placeholder = "ДД.MM.ГГГГ",
     error,
-}: Props) {
-    const [inputValue, setInputValue] = useState(value ? formatDDMMYYYY(value) : "");
-    const [opened, setOpened] = useState(false);
-    const inputRef = useRef<HTMLInputElement>(null);
+    maxDate
+}: MaskedDateInputProps) {
+    const [inputValue, setInputValue] = useState(value ? formatDDMMYYYY(value) : "")
+    const [opened, setOpened] = useState(false)
+    const inputRef = useRef<HTMLInputElement>(null)
 
     useEffect(() => {
         if (value) {
             const formatted = formatDDMMYYYY(value);
             if (formatted !== inputValue) {
-                setInputValue(formatted);
+                setInputValue(formatted)
             }
         }
-    }, [value]);
-
-    const correctDateString = (raw: string): string => {
-        const nums = raw.replace(/\D/g, "").slice(0, 8);
-        const parts: string[] = [];
-
-        if (nums.length >= 2) {
-            const day = Math.min(parseInt(nums.slice(0, 2)), 31);
-            parts.push(day.toString().padStart(2, "0"));
-        } else if (nums.length >= 1) {
-            parts.push(nums.slice(0, 1));
-        }
-
-        if (nums.length >= 4) {
-            const month = Math.min(parseInt(nums.slice(2, 4)), 12);
-            parts.push(month.toString().padStart(2, "0"));
-        } else if (nums.length >= 3) {
-            parts.push(nums.slice(2, 3));
-        }
-
-        if (nums.length >= 8) {
-            const yearRaw = parseInt(nums.slice(4, 8));
-            const year = Math.min(Math.max(1900, yearRaw), currentYear);
-            parts.push(year.toString());
-        } else if (nums.length >= 5) {
-            parts.push(nums.slice(4));
-        }
-
-        return parts.join(".");
-    };
+    }, [value])
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        let raw = e.target.value.replace(/[^\d]/g, '').slice(0, 8);
-        let day = raw.slice(0, 2);
-        let month = raw.slice(2, 4);
-        let year = raw.slice(4, 8);
+        let raw = e.target.value.replace(/[^\d]/g, '').slice(0, 8)
+        let day = raw.slice(0, 2)
+        let month = raw.slice(2, 4)
+        let year = raw.slice(4, 8)
 
-        if (day.length === 1 && parseInt(day) > 3) day = '0' + day;
-        if (month.length === 1 && parseInt(month) > 1) month = '0' + month;
+        if (day.length === 1 && parseInt(day) > 3) day = '0' + day
+        if (month.length === 1 && parseInt(month) > 1) month = '0' + month
 
-        const newValue = [day, month, year].filter(Boolean).join('.');
+        const newValue = [day, month, year].filter(Boolean).join('.')
 
-        setInputValue(newValue);
+        setInputValue(newValue)
 
-        const parsed = parseDDMMYYYY(newValue);
-        if (parsed) onChange?.(parsed);
+        const parsed = parseDDMMYYYY(newValue)
+        if (parsed) onChange?.(parsed)
     };
 
 
     const handleDatePick = (date: Date | null) => {
-        if (!date) return;
-        const formatted = formatDDMMYYYY(date);
-        setInputValue(formatted);
-        onChange(date);
-        setOpened(false);
-    };
+        if (!date) return
+        const formatted = formatDDMMYYYY(date)
+        setInputValue(formatted)
+        onChange(date)
+        setOpened(false)
+    }
 
     return (
         <InputBase
@@ -152,11 +121,11 @@ export default function MaskedDateInput({
                             value={value}
                             onChange={handleDatePick}
                             defaultLevel="month"
-                            maxDate={new Date()}
+                            maxDate={maxDate}
                         />
                     </Popover.Dropdown>
                 </Popover>
             }
         />
-    );
+    )
 }