Feature Unified Date Pickers

Фича: единые удобные поля дат на сайте

Статус: сделано. Эпик: UX/UI аудит сайта. Документация: Фронтенд. Задача: #271. PR: #272. Связь: продолжает #248 / Feature-Home-Search-Calendar; каталог и остальные формы ещё на нативном input type="date".

Бизнес и сценарии

Гость и менеджер везде, где выбирают дату или диапазон, видят один и тот же понятный календарь в цветах сайта: клик по полю открывает панель рядом с полем (на телефоне снизу), даты крупные, без мерцания и без лишнего скролла страницы. На главной и в каталоге поведение фильтра по датам то же, меняется только вид и удобство.

Простой пример: на /tours в блоке «Даты выезда» человек нажимает «С», выбирает 12 ноября, затем «По» и 20 ноября; фильтр обновляется как сейчас, но календарь выглядит так же, как на главной.

• Сценарии: открытие/закрытие (клик вне, Esc); один день; диапазон; сброс; недоступные дни (прошлые на главной; границы каталога); главная → каталог с query без смены ключей; менеджер: одна дата и пара дат в заявках, редакторе дат тура и мастере.
• Входит: единый компонент выбора даты/диапазона на всём фронте; стили и позиционирование панели; замена нативных type="date" в TourFilters, ManagerBookingsPage, DatesEditor, TourWizard; доработка главной (SearchBar / попап); тесты vitest.
• Не входит: смена API и ключей query; операторский поиск #138; отдельный справочник городов; смена логики сопоставления «Куда?».
• Критерии приёмки:
  • На главной, в каталоге и в формах менеджера нет input type="date" для выбора даты.
  • Клик по любой части поля дат открывает календарь; пустое поле показывает понятную подсказку, не маску dd.mm.yyyy.
  • Панель не мигает в углу экрана: появляется сразу у поля (или снизу на узком экране).
  • На 390, 768 и 1280 px панель целиком в видимой области, без горизонтального скролла страницы и без «окна» с внутренним скроллом из-за слишком большой сетки.
  • Диапазон и одна дата интуитивны: видно выбранные границы и дни между ними; сброс понятен.
  • Клавиатура: Tab, Enter, Esc, стрелки по дням.
  • Передача dateFrom/dateTo и границы дат как сейчас (главная: календарь Europe/Moscow; каталог: существующие min/max).

Архитектура

• Модель данных и API: без изменений.
• Интерфейс: один переиспользуемый контрол (обёртка над выбранной библиотекой) + общая панель-попап. Главная продолжает диапазон; каталог «С»/«По» тоже через него (два поля или один диапазон в одном визуальном языке); менеджерские одиночные и парные даты через тот же контрол в режиме одной даты или диапазона.
• Ключевые места сейчас: SearchBar.tsx, DateRangeCalendar.tsx, SearchPopup.tsx, homeCalendar.ts, TourFilters.tsx, ManagerBookingsPage.tsx, DatesEditor.tsx, TourWizard.tsx.
• Влияние: удаление или сужение самописного DateRangeCalendar после перехода на библиотеку; общие стили в Tailwind под палитру sand / cream / primary / dark.

Решения

Вопрос	Варианты	Выбрано	Почему	Дата
Натив или кастом	оставить input type="date" везде и только подтянуть вёрстку строки; допилить самописный календарь; стабильная UI-библиотека	библиотека	Натив в разных браузерах выглядит по-разному (у части маска и календарь «чужие»), это уже бесит на главной. Самописный после #248 даёт мерцание (попап рисуется до замера якоря), слишком широкий (minWidth 700), крупные клетки size-11 и внутренний скролл. Библиотека даёт доступность, range и темы без поддержки своей сетки с нуля.	2026-10-23
Какая библиотека	react-datepicker; @mui/x-date-pickers; допилить свой; react-day-picker v10	react-day-picker v10	В проекте уже date-fns ^4; v10 зависит от date-fns ^4 и @date-fns/tz (удобно для границы «сегодня» по Москве). Лёгкий headless-календарь, легко вписать в Tailwind и палитру сайта. react-datepicker тянет свой CSS и слабее садится на дизайн. MUI слишком тяжёлый для одного контрола.	2026-10-23
Область замены	только главная+каталог; весь сайт включая менеджера	весь фронт, где есть выбор даты	Иначе снова два стандарта. Список: главная, фильтры каталога, заявки менеджера, редактор дат тура, мастер тура.	2026-10-23
Попап	оставить текущий SearchPopup как есть; заменить на Floating UI; починить замер до первого кадра	починить/упростить попап (замер до показа, адаптивная ширина без жёстких 700px; на узком экране нижняя шторка)	Мерцание из-за первого кадра с anchor === null. Отдельный Floating UI не обязателен, если текущий попап сначала измеряет, потом показывает.	2026-10-23

Разбиение

Подзадача	Раздел страницы	Задача	Статус
Единый date-picker на сайте (библиотека, попап, замена всех type="date", тесты)	Архитектура, Тест-кейсы	#271	сделано

Тест-кейсы

№	Предусловие	Шаги	Ожидаемый результат	Уровень
ТК-1	главная	открыть «Когда?»	панель у поля (или снизу на узком), без вспышки в углу; нет input[type=date]	unit / вручную
ТК-2	каталог	«С» и «По»	тот же календарь; значения уходят в фильтр как раньше	unit
ТК-3	узкий 390 px	открыть календарь	панель в экране, страница без горизонтального скролла	вручную на dev
ТК-4	широкий 1280 px	диапазон на главной	два месяца или компактная сетка без внутреннего скролла «в никуда»	вручную
ТК-5	менеджер: заявки / даты тура / мастер	выбрать дату	нет нативного date; значение сохраняется в том же формате	unit
ТК-6	календарь открыт	Esc, клик вне, Tab/стрелки	закрытие и навигация по дням	unit
ТК-7	регрессия query	поиск с главной с датами	те же ключи dateFrom/dateTo / direction / country	unit

Тесты обновить: SearchBar.test.tsx, HomePage.test.tsx, фильтры каталога и затронутые менеджерские тесты при наличии.