/** * Material Design 3 Date Picker — Dialog variant. * Opens a calendar inside a MUI Dialog (works well on mobile and inside other dialogs). */ 'use client'; import React, { useState, useMemo } from 'react'; import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay, isSameMonth, addMonths, subMonths, startOfWeek, endOfWeek, } from 'date-fns'; import { ru } from 'date-fns/locale'; import { Dialog, DialogContent, Box, Button } from '@mui/material'; interface DatePickerProps { value: string; // YYYY-MM-DD format onChange: (value: string) => void; disabled?: boolean; required?: boolean; label?: string; } export const DatePicker: React.FC = ({ value, onChange, disabled = false, required = false, label, }) => { const [open, setOpen] = useState(false); const [displayMonth, setDisplayMonth] = useState( value ? new Date(value + 'T00:00:00') : new Date(), ); const selectedDate = useMemo( () => (value ? new Date(value + 'T00:00:00') : null), [value], ); const openPicker = () => { if (disabled) return; setDisplayMonth(selectedDate ?? new Date()); setOpen(true); }; const closePicker = () => setOpen(false); const handleDateSelect = (date: Date) => { const y = date.getFullYear(); const m = String(date.getMonth() + 1).padStart(2, '0'); const d = String(date.getDate()).padStart(2, '0'); onChange(`${y}-${m}-${d}`); closePicker(); }; const days = useMemo(() => { const start = startOfMonth(displayMonth); const end = endOfMonth(displayMonth); return eachDayOfInterval({ start: startOfWeek(start, { locale: ru }), end: endOfWeek(end, { locale: ru }), }); }, [displayMonth]); const weekDays = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']; const displayValue = selectedDate ? format(selectedDate, 'd MMMM yyyy', { locale: ru }) : label || 'Выберите дату'; return ( <> ); };