DateTimeField

Паттерны

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

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

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

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

• Оставьте DateTimeFieldInput основной поверхностью и подпишите его.
• Монтируйте DateTimeFieldCalendar внутри PopoverContent; выбор дня сохраняет введённое время.

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

• Форма остаётся компактной.
• Нужны понятные указания о формате и часовом поясе.

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

Поле метки времени в формах планирования

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

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

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

• Текст подсказки должен явно указывать часовой пояс и ожидаемый формат.
• Согласуйте min, max и timeStep с бизнес-правилами планирования; min и max ограничивают введённые значения, а timeStep управляет только шагом клавиш-стрелок.
• name на input отправляет введённый текст; чтобы отправить значение YYYY-MM-DDTHH:mm, копируйте onChangeValue в скрытый input, как в разделе Форма/интеграция.

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

• Полный контроль над меткой времени в одной строке поля.
• Больше сложности с валидацией и текстами, чем у простого поля даты.

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

Поле метки времени в мобильных шторках

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

• Планирование происходит внутри Sheet или другого стеснённого оверлея.
• Пользователю всё равно нужен доступ к календарю.

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

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

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

• Сохраняет модальный контекст.
• Усложняет согласование оверлеев и фокуса.

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

Сравнение

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

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

DateTimeField или DateField

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

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

Главный компромисс: DateTimeField фиксирует полную метку времени, но её сложнее вводить, валидировать и объяснять.

DateTimeField или DateRangeField

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

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

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

DateTimeField или Calendar

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

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

Главный компромисс: DateTimeField сильнее в сценариях форм, а Calendar — в наглядном просмотре дат.

DateTimeField или TimeField + DateField

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

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

Главный компромисс: DateTimeField уменьшает рассогласование, а раздельные поля могут лучше подойти для специализированных сценариев.

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

• Продукт хранит одну метку времени.
• Пользователи могут вводить и дату, и время.
• Валидация и тексты должны оставаться в одной строке поля.

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

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

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

Введённая метка времени не соответствует ожиданиям продукта

Симптом

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

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

Настройки поля не согласованы с продуктовыми правилами часового пояса или сериализации.

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

• Сравните видимые указания к полю с сохранёнными данными.
• Проверьте, происходит ли преобразование часового пояса до или после отправки.

Исправление

Делайте форматирование метки времени, правила часового пояса и сериализацию данных явными в сценарии функции.

Триггер календаря ничего не открывает

Симптом

Кнопка с иконкой отображается, но календарь так и не появляется.

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

DateTimeFieldTriggerIconButton отрендерен без композиции с Popover или без DateTimeFieldCalendar внутри оверлея.

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

• Проверьте, обёрнут ли триггер в PopoverTrigger.
• Проверьте, содержит ли PopoverContent компонент DateTimeFieldCalendar.

Исправление

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

Шаг времени ощущается неправильным

Симптом

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

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

timeStep не отражает реальное бизнес-ограничение функции.

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

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

Исправление

Настройте timeStep в соответствии с реальным правилом планирования и последовательно проверяйте его при отправке.