ДокументацияCalendar

Calendar

Базовый календарь без инпута и попапа. Используй как строительный блок или когда нужен inline-выбор на странице.

previewCalendar
May 2026
import { useState } from 'react'
import { Calendar } from 'daterly'
 
const [date, setDate] = useState<Date | undefined>()
 
<Calendar mode="single" selected={date} onSelect={setDate} />

Диапазон

previewCalendar mode=range
May 2026
June 2026
import type { DateRange } from 'daterly'
 
const [range, setRange] = useState<DateRange | undefined>()
 
<Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />

Множественный выбор

previewCalendar mode=multiple
May 2026
const [days, setDays] = useState<Date[] | undefined>()
 
<Calendar mode="multiple" selected={days} onSelect={setDays} />

Другая локаль

previewCalendar locale=en-US · locale=en-US
May 2026
import { enUS } from 'date-fns/locale'
 
<Calendar mode="single" locale={enUS} />

Под капотом

Calendar — тонкая обёртка над <DayPicker> из react-day-picker. Принимает все пропсы DayPicker (mode, selected, onSelect, disabled, locale, numberOfMonths, startMonth, endMonth, fromDate, toDate, navLayout и т.д.).

Документация по полному API: daypicker.dev.

DateRangePickerЛокали и форматы