Calendar

Календарь выбора даты на react-day-picker (v10). Вариант base — чистая обёртка DayPicker (Calendar / CalendarDayButton) с режимами single / multiple / range. Для форм — CalendarField (алиас на field-версию single-date: значение Date | null, selected / onSelect сводятся к value / onChange). Навигация настраивается через captionLayout, дни соседних месяцев — через showOutsideDays.

Variants — готовые конфигурации компонента: один и тот же компонент с разными преднастроенными пропсами. Витрина состояний (напр. обычный Select и Select с расширенной информацией — два варианта).

Examples — приёмы в коде: как решить задачу. Напр. как разные Data Provider’ы работают с компонентом (рецепты использования).

CalendarField привязан к полю формы: значение — Date | null, повторный клик по дате сбрасывает выбор в null.

Загрузка демо…

captionLayout="dropdown" заменяет статичную подпись месяца на выпадающие списки месяца и года — быстрый переход к далёким датам.

Загрузка демо…

Форма вне схемы: чистый Calendar варианта base с локальным состоянием (mode / selected / onSelect). Так же собираются multiple- и range-режимы.

Загрузка демо…