DateRangePicker

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

previewDateRangePicker

Период

Базовый пример

import { useState } from 'react'
import { DateRangePicker, type DateRange } from 'daterly'
 
const [range, setRange] = useState<DateRange | undefined>()
 
<DateRangePicker
  label="Период проживания"
  value={range}
  onChange={setRange}
/>

Двухфазный выбор

Первый клик в календаре — устанавливает начало диапазона (anchor). Второй клик — фиксирует конец и закрывает попап. При движении мыши между кликами подсвечивается потенциальный диапазон.

Если кликнуть на дату раньше anchor — она автоматически станет началом, а первоначальный anchor — концом.

Расположение календаря

<DateRangePicker calendarLayout="horizontal" />   {/* по умолчанию */}
<DateRangePicker calendarLayout="vertical" />     {/* в стек */}

С выбором времени

previewЖивой компонент · HH:mm

Период (HH:mm)

<DateRangePicker
  label="Период с точностью до минуты"
  showTime={{ format: 'HH:mm' }}
/>

Под календарём появляются два поля выбора времени — для начала и для конца диапазона. Попап в этом режиме не закрывается автоматически — закрытие по кнопке OK.

Варианты TimePicker

Проп timePickerType управляет видом выбора времени. По умолчанию — 'input'.

'input' — два компактных числовых поля рядом с кнопкой OK (Начало / Конец). Удобно для ввода с клавиатуры.

previewЖивой компонент · HH:mm · timePicker=input

TimePicker: input

<DateRangePicker showTime={{ format: 'HH:mm' }} timePickerType="input" />

'drum' — два «барабана» под календарём, листаются кликом или колесом. Подходит для тач-устройств.

previewЖивой компонент · HH:mm · timePicker=drum

TimePicker: drum

<DateRangePicker showTime={{ format: 'HH:mm' }} timePickerType="drum" />

Локаль

previewЖивой компонент · locale=en-US · format=MM/dd/yyyy

Period

import { enUS } from 'date-fns/locale'
 
<DateRangePicker locale={enUS} dateFormat="MM/dd/yyyy" label="Period" />

Ограничение

<DateRangePicker fromDate={new Date()} toDate={new Date(2027, 11, 31)} />

Все пропсы

Те же, что и у DatePicker, плюс:

Prop	Тип	По умолчанию	Описание
`value`	`DateRange`	—	`{ from, to }`
`defaultValue`	`DateRange`	—	Начальный диапазон
`onChange`	`(range: DateRange \| undefined) => void`	—	Колбэк
`calendarLayout`	`'horizontal' \| 'vertical'`	`'horizontal'`	Расположение двух месяцев

DateRange импортируется из основного entry-point:

import type { DateRange } from 'daterly';

DatePicker Calendar