Ravox KitForms
Date Picker
A date field that accepts both: typing the date (slashes are added automatically, in the language's order: dd/mm/yyyy in Brazil) or picking from the calendar that opens on top. DateRangePicker takes a range with two fields, two months and shortcuts such as "Last 7 days". Warns about a date that doesn't exist, is out of bounds or unavailable.
Dia, mês e ano, como 29/09/2026.
Digite só os números: as barras entram sozinhas.
Settings
Toggles
Examples
Birth date: typing is faster
Dia, mês e ano, como 29/09/2026.
Mais rápido digitando: 14031992.
Range with shortcuts
Vendas no período
Dia, mês e ano, como 29/09/2026.
Delivery: limits and custom shortcuts
Dia, mês e ano, como 29/09/2026.
Não entregamos aos domingos.
With a form error
Dia, mês e ano, como 29/09/2026.
Informe quando o contrato começa.
Installation
The command creates components/ui/date-picker.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add date-pickerProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | Date | null · { from?, to? } | — | DatePicker uses a date; DateRangePicker, a range. |
| onValueChange | (date: Date | undefined) => void · (range) => void | — | Called when picking from the calendar, a shortcut, or when the typed date becomes complete and valid. A cleared field sends undefined. |
| presets | { label, date(today) }[] · { label, range(today) }[] | — | Buttons beside the calendar. Ready-made: datePresets and rangePresets (in English) or datePresetsFor(locale) and rangePresetsFor(locale), which follow the language (en or pt). |
| min · max · isDateDisabled | Date · Date · (date: Date) => boolean | — | Limits that apply in the calendar and to what is typed (with the right message). |
| label · hint · error | ReactNode | — | Label, help and error. Without an outside error, the field itself warns about an incomplete, nonexistent or out-of-bounds date. |
| size | "sm" | "md" | "lg" | "md" | Height: 32, 40 or 48px. |
| weekStartsOn | 0 a 6 | o do locale | Day the week starts on in the calendar. Without the prop, it comes from Intl. |
| locale | string | idioma do navegador | Language of the calendar, the typed field order (dd/mm/yyyy in pt-BR, mm/dd/yyyy in en-US, yyyy-mm-dd in ja…) and the texts (built in for en and pt; other languages use en). On the server it renders in en-US and switches after hydration. |
| onBlur | () => void | — | Focus left the field and the calendar (the Controller's onBlur). |
| name · names | string · [string, string] | — | Sends the date in ISO (yyyy-mm-dd) in <input type="hidden">. In a range, one name for each end. |
| fieldLabels | [string, string] | ["Start date", "End date"] | DateRangePicker: what the screen reader reads for each field (default translated: en or pt, depending on locale). |
| wrapperClassName · panelClassName | string | — | Classes of the outer block and of the floating panel. className goes on the field box. |