llms.txt

Calendar

Пакет @cloud-ru/ds-calendar объединяет полноэкранный и встраиваемый календарь с клавиатурной навигацией и два варианта выбора времени: встроенный TimePicker и TimePickerDropdown на базе Dropdown для полей с триггером.

  • Calendar — выбор даты, даты со временем, диапазонов и месяцев/лет в режимах CALENDAR_MODE.
  • TimePicker — выбор часов, минут и опционально секунд в потоке формы.
  • TimePickerDropdown — то же время в выпадающей панели с кнопками действий и настройками позиционирования триггера.

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

  • Нужен выбор периода или точечной даты с доступностью с клавиатуры и поддержкой локали.
  • Время задаётся отдельно от даты или внутри поля — берите TimePicker или TimePickerDropdown по контексту (inline vs popover).

Когда не подходит: для простого текстового поля с маской без визуального календаря рассмотрите нативный input type="date" или поле с маской; для таймзон и сложного расписания — специализированные виджеты.

Установка

pnpm add @cloud-ru/ds-calendar
import { Calendar, CALENDAR_MODE, TimePicker, TimePickerDropdown } from '@cloud-ru/ds-calendar'

Адаптивность

Триггерные CalendarDropdown и TimePickerDropdown переключают поверхность (surface-swap): на desktop — popover над триггером (@cloud-ru/ds-dropdown), на mobile — BottomSheet из @cloud-ru/ds-bottom-sheet. Раскладка берётся из AdaptiveProvider (контекст @cloud-ru/ds-adaptive), пропа layoutType нет. Встраиваемые Calendar и TimePicker desktop-only и не адаптируются.

Детали поведения на mobile — на страницах Calendar и TimePickerDropdown. Общая модель — Adaptive.

Figma

Макеты разбиты по узлам в библиотеке FF-8179 (сетка дней, месяцев, лет, барабан времени). Конкретные embed — на страницах компонентов ниже.

Смотри также