# DatePicker

A compact date picker with a dropdown calendar.

## 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


```tsx
import { DatePicker } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<DatePicker placeholder="Choose a date" mode="single" localeCode="en" />
```


## With time

```tsx
<DatePicker placeholder="Date and time" withTime timeFormat="24h" localeCode="en" />
```


## API: DatePicker


```typescript
declare function DatePicker(props: DatePickerProps): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| calendarClassName | string | No | See the published type. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultValue | DatePickerValue | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| locale | Locale | No | Localization in the format expected by the component. |
| localeCode | string | No | Language code for the picker. |
| mode | "single" \| "range" \| "month" \| "year" | No | Selection mode. |
| numberOfMonths | number | No | See the published type. |
| onValueChange | ((date: DatePickerValue) => void) | No | Receives the value after an interaction. |
| placeholder | string | No | Short hint displayed when there is no value. |
| presets | DatePickerPreset[] | No | See the published type. |
| showFooter | boolean | No | See the published type. |
| showPresets | boolean | No | See the published type. |
| startView | "month" \| "year" \| "calendar" | No | See the published type. |
| timeFormat | "12h" \| "24h" | No | 12-hour or 24-hour cycle. |
| value | DatePickerValue | No | Controlled value. Update it from the change callback. |
| withTime | boolean | No | Include time editing. |

Source: https://kivora.pro/docs/componentes/date-picker