FormsInteractive playground
DatePicker
A compact date picker with a dropdown calendar.
Preparing the playground…
Text and Markdown example
DatePicker · Example
1<DatePicker placeholder="Choose a date" mode="single" localeCode="en" />How to use it
Use value and onValueChange to integrate it into a form. mode supports date, range, month or year; withTime adds time selection.
Import
React / Next.js
1import { DatePicker } from "@kivora/nextjs";Interactive examples run inside a component with "use client". The playground's Copy button includes the imports needed for the current example.
API reference 0.2.0
Types from the installed published version, including component properties and common HTML attributes. “Optional” does not imply a default value; omitting a property lets the component decide.
| Property | Type | Description |
|---|---|---|
calendarClassName | string | CSS classes for the specified element. |
className | string | Additional CSS classes to customize the element. |
defaultValue | DatePickerValue | Initial value when the component manages its own state. |
disabled | boolean | Disable interaction with the control. |
locale | Locale | Localization in the format expected by the component. |
localeCode | string | Language code for the picker. |
mode | "single" | "range" | "month" | "year" | Selection mode. |
numberOfMonths | number | Configures numberOfMonths. The type describes the supported values and structure. |
onValueChange | ((date: DatePickerValue) => void) | Receives the value after an interaction. |
placeholder | string | Short hint displayed when there is no value. |
presets | DatePickerPreset[] | Configures presets. The type describes the supported values and structure. |
showFooter | boolean | Configures showFooter. The type describes the supported values and structure. |
showPresets | boolean | Configures showPresets. The type describes the supported values and structure. |
startView | "month" | "year" | "calendar" | Configures startView. The type describes the supported values and structure. |
timeFormat | "12h" | "24h" | 12-hour or 24-hour cycle. |
value | DatePickerValue | Controlled value. Update it from the change callback. |
withTime | boolean | Include time editing. |
TypeScript definition
Review each component's properties and published declaration. Native and accessibility attributes are inherited from the element specified by its type.
DatePicker17 properties
DatePicker · TypeScript
1declare function DatePicker(props: DatePickerProps): React.JSX.Element;API generated from @kivora/nextjs 0.2.0View package