DateRangeField

Паттерны

Поле диапазона с календарём в поповере

Когда использовать:

• Пользователям нужно одно связанное поле диапазона в форме или панели фильтров.
• Выбор диапазона должен открываться по запросу.

Заметки по композиции:

• Оставьте DateRangeFieldInput основной поверхностью ввода и дайте ему подпись.
• Монтируйте DateRangeFieldCalendar внутри PopoverContent; первый выбранный день записывается как начало, второй — как конец.

Компромиссы:

• Экономит место в раскладке.
• Требует явной обработки неполного диапазона: одна дата — допустимый ввод.

import {
  CalendarContent,
  CalendarDay,
  CalendarDays,
  CalendarHeader,
  CalendarMonth,
  CalendarMonthLabel,
  CalendarMonths,
  CalendarNextButton,
  CalendarPrevButton,
  CalendarViewButton,
  CalendarViewButtonGroup,

Поле диапазона в выдвижных панелях фильтров

Когда использовать:

• Фильтры отчётов или аналитики находятся внутри Drawer или Sheet.
• Диапазон — один из нескольких фильтров, расположенных друг под другом.

Заметки по композиции:

• Делайте поле компактным и явно обозначайте семантику диапазона.
• Проверьте расположение поповера внутри родительского оверлея.

Компромиссы:

• Хорошо работает в плотных интерфейсах фильтров.
• Добавляет сложность согласования оверлеев.

import { CSSProperties, useState } from 'react';
import { XIcon } from '@vega-ui/icons';
import {
  Button,
  CalendarContent,
  CalendarDay,
  CalendarDays,
  CalendarHeader,
  CalendarMonth,
  CalendarMonthLabel,
  CalendarMonths,
  CalendarNextButton,

Поле диапазона для форм отчётов со строгой валидацией

Когда использовать:

• Диапазон обязателен перед экспортом или формированием отчёта.
• Продукту нужны явные тексты ошибок для неполных или заблокированных диапазонов.

Заметки по композиции:

• Используйте нативный required и pattern для полного диапазона; min и max уже применяются при вводе, а перевёрнутый диапазон переставляется.
• disabledDates действует только в календаре, поэтому согласуйте его с правилами отчётности на бэкенде и повторите проверку при отправке.

Компромиссы:

• Более понятная валидация.
• name на input отправляет введённый текст; чтобы отправить from и to как ISO-дни, копируйте onChangeValue в скрытые input, как в разделе Форма/интеграция.

import { FormEvent, useState } from 'react';
import {
  Button,
  CalendarContent,
  CalendarDay,
  CalendarDays,
  CalendarHeader,
  CalendarMonth,
  CalendarMonthLabel,
  CalendarMonths,
  CalendarNextButton,
  CalendarPrevButton,

Сравнение

Быстрое правило выбора

Используйте DateRangeField, когда один контрол должен владеть и датой начала, и датой окончания.

DateRangeField или DateField

Используйте DateRangeField, когда пара дат должна оставаться связанной и проверяться вместе.

Используйте DateField, когда хранится только одна дата.

Главный компромисс: DateRangeField снижает ошибки согласования, но его сложнее подписать, провалидировать и проверить на ревью.

DateRangeField или DateTimeField

Используйте DateRangeField, когда функция касается промежутка дат, а не конкретного момента времени.

Используйте DateTimeField, когда один итоговый запланированный момент важнее промежутка.

Главный компромисс: диапазоны передают длительность, а поля даты и времени — точный момент.

DateRangeField или Calendar

Используйте DateRangeField, когда контрол находится в форме и важен ввод с клавиатуры.

Используйте Calendar, когда основной UI — выбор диапазона прямо в видимом календаре.

Главный компромисс: DateRangeField удобнее в формах, а Calendar сильнее, когда даты выбирают, разглядывая календарь.

Выбирайте этот компонент, когда

• Даты начала и окончания относятся к одному бизнес-понятию.
• Функции нужны одна подпись, одно состояние ошибки и один слот фильтра.
• Пользователи могут ввести или выбрать диапазон.
• Диапазон должен вести себя как одно поле, а не как два слабо связанных input.

Не выбирайте этот компонент, когда

• Нужна только одна дата.
• Хранимое значение должно включать время.
• Интерфейсу нужен полностью видимый календарь для выбора диапазона, а не контрол на основе поля.

Решение проблем

Сохраняется только одна сторона диапазона

Симптом

Продукт отправляет дату начала или окончания, но другой стороны нет или она устарела.

Вероятная причина

Окружающая форма или модель состояния считает диапазон двумя несвязанными значениями, а не одним связанным полем.

Как проверить

• Изучите итоговый payload или состояние формы.
• Убедитесь, что обе даты получены из взаимодействия с одним и тем же полем.

Решение

Моделируйте результат как один связанный диапазон и явно проверяйте неполное состояние.

Триггер календаря есть, но выбор диапазона не появляется

Симптом

Иконка-кнопка есть, но клик по ней так и не показывает календарь диапазона.

Вероятная причина

DateRangeFieldTriggerIconButton отрендерен без PopoverTrigger, PopoverContent или DateRangeFieldCalendar.

Как проверить

• Проверьте, находится ли триггер внутри PopoverTrigger.
• Проверьте, содержит ли PopoverContent компонент DateRangeFieldCalendar.

Решение

Собирайте триггер и календарь через Popover.

Неполный диапазон считается валидным

Симптом

Пользователи могут отправить только дату начала или только дату окончания, хотя функции нужны обе.

Вероятная причина

Валидация проверяет форму поля поверхностно и не требует полной семантики диапазона.

Как проверить

• Отправьте форму без одной из сторон.
• Сравните клиентскую валидацию с бизнес-требованиями.

Решение

Считайте частичные диапазоны явным состоянием редактирования и блокируйте отправку, пока диапазон не будет полным.