v1.4.0 — usePortal()

Date picker,
в который удобно
печатать руками

React DatePicker с маской ввода. Контролируемый и неконтролируемый, диапазоны, время, любые локали date-fns. Нулевые издержки, если react-hook-form не нужен.

  • ~29 KB brotli
  • TypeScript из коробки
  • MIT
Маска вводаformat="dd.MM.yyyy"
dd.MM.yyyy

Печатай подряд — точки расставятся сами. Backspace пропускает разделители, валидность проверяется round-trip'ом.

onChange value
null
~29 KB
brotli, весь пакет
0
runtime-deps кроме date-fns
3
формата: ESM · CJS · .d.ts
2
пропса на любой формат
react-hook-form

В реальной форме

Через daterly/rhf — типобезопасный name, валидация, defaultValues и control из useForm.

Дата рождения
Отпуск
onSubmit value
// Заполни форму и нажми «Отправить»
tsxпример кода
import { useForm, FormProvider } from 'react-hook-form'
import {
  RHFDatePicker,
  RHFDateRangePicker,
} from 'daterly/rhf'

const methods = useForm()

<FormProvider {...methods}>
  <form onSubmit={methods.handleSubmit(onSubmit)}>
    <input {...methods.register('name')} />

    <RHFDatePicker
      name="birthday"
      label="Дата рождения"
    />

    <RHFDateRangePicker
      name="vacation"
      label="Отпуск"
    />
  </form>
</FormProvider>

Всё, что нужно от date picker’а

Локали

Любой язык через проп

  • ru12 мая 2026
  • enMay 12, 2026
  • de12. Mai 2026
Range + время

Двухфазный клик, опциональный TimePanel

12.05.2026 09:3019.05.2026 18:00
Контроль

Controlled и uncontrolled

<DatePicker
  value={d}
  onChange={setD}
/>

Минимальный API

Два пропса покрывают 90% случаев. Остальное — по необходимости.

valueDate | nullКонтролируемое значение
onChange(d: Date|null) => voidКолбэк при изменении
formatstringМаска date-fns, напр. dd.MM.yyyy
localeLocaleЛокаль date-fns
rangebooleanДвухфазный выбор диапазона
showTimebooleanВключить TimePanel

Готов поставить?

Рецепты, API и примеры под RHF, Zod, Joi и shadcn/ui — в документации.