Add MaskedDateInput component

src/components/MaskedDateInput.tsx

@@ -1,10 +1,162 @@
-import { InputBase } from "@mantine/core"
+import { useEffect, useRef, useState } from "react";
-import { IMaskInput } from 'react-imask';
+import {
+    InputBase,
+    ActionIcon,
+    Popover,
+} from "@mantine/core";
+import { IconCalendar } from "@tabler/icons-react";
+import { DatePicker } from "@mantine/dates";
+import dayjs from "dayjs";
 
-const MaskedDateInput = () => {
+interface Props {
-    
+    value?: Date | null;
+    onChange: (value: Date | null) => void;
+    label?: string;
+    required?: boolean;
+    placeholder?: string;
+    error?: string;
+}
+
+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);
+
+    if (
+        isNaN(day) || isNaN(month) || isNaN(year) ||
+        day < 1 || day > 31 ||
+        month < 1 || month > 12 ||
+        year < 1900 || year > currentYear
+    ) {
+        return 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");
+}
+
+export default function MaskedDateInput({
+    value,
+    onChange,
+    label,
+    required,
+    placeholder = "ДД.MM.ГГГГ",
+    error,
+}: Props) {
+    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);
+            }
+        }
+    }, [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(".");
+    };
+
+    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);
+
+        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('.');
+
+        setInputValue(newValue);
+
+        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);
+    };
 
     return (
-        <InputBase component={IMaskInput} mask="00.00.0000" placeholder="ДД.ММ.ГГГГ"/>
+        <InputBase
-    )
+            label={label}
-}
+            required={required}
+            component="input"
+            type="text"
+            ref={inputRef}
+            value={inputValue}
+            onChange={handleChange}
+            placeholder={placeholder}
+            error={error}
+            rightSection={
+                <Popover
+                    opened={opened}
+                    trapFocus
+                    onChange={setOpened}
+                    position="bottom"
+                    shadow="md"
+                    width="auto"
+                >
+                    <Popover.Target>
+                        <ActionIcon
+                            variant="transparent"
+                            onClick={() => setOpened((o) => !o)}
+                        >
+                            <IconCalendar size={16} />
+                        </ActionIcon>
+                    </Popover.Target>
+                    <Popover.Dropdown>
+                        <DatePicker
+                            locale="ru"
+                            value={value}
+                            onChange={handleDatePick}
+                            defaultLevel="month"
+                            maxDate={new Date()}
+                        />
+                    </Popover.Dropdown>
+                </Popover>
+            }
+        />
+    );
+}

src/pages/DriverForm.tsx

@@ -16,6 +16,7 @@ import {
   updateDictionaryItem,
   deleteDictionaryItem,
 } from "../api/api";
+import MaskedDateInput from '../components/MaskedDateInput';
 
 const DriverForm = () => {
   const [drivers, setDrivers] = useState<any[]>([]);
@@ -237,7 +238,7 @@ const DriverForm = () => {
           <TextInput label="ФИО" {...driverForm.getInputProps("fullname")} required />
           <TextInput label="СНИЛС" {...driverForm.getInputProps("snils")} required />
           <TextInput label="ИНН" {...driverForm.getInputProps("iin")} required />
-          <DateInput
+          {/* <DateInput
             label="Дата рождения"
             placeholder="ДД.MM.ГГГГ"
             defaultLevel='month'
@@ -246,6 +247,11 @@ const DriverForm = () => {
             dateParser={parseDDMMYYYY}
             locale="ru"
             {...driverForm.getInputProps("birthday")}
+          /> */}
+          <MaskedDateInput
+            label="Дата рождения"
+            required
+            {...driverForm.getInputProps("birthday")}
           />
           <Button fullWidth mt="md" type="submit">
             Сохранить