DatePicker
Custom date picker with month, year and decade views. Fully keyboard-accessible with smart dropdown positioning, no native input dependency.
Playground
label
placeholder
format
size
clearable
showIcon
disabled
rounded
<DatePicker
placeholder="Select date"
/>Basic
Uncontrolled usage, manages state internally.
Clearable
Adds a clear button when a date is selected.
Controlled
Drive the value from external state.
No date selected
With Label and Hint
Start datePick your event start date
Error State
AppointmentPlease select a date
Min / Max Date
Restrict selection to a date range (±30 days from today).
Within 30 days
Disable Weekends
Pass a disabledDate function to block specific dates.
Weekdays only
Custom Format
Use format tokens: YYYY, MM, DD.
Sizes
Disabled
Locale: Tiếng Việt
Pass locale="vi" to switch all panel labels to Vietnamese. When omitted, the picker auto-detects from <html lang="…">.
Locale: Custom object
Pass a full DatePickerLocale object for any language not built-in.
Hide Icon
Set showIcon={false} to remove the calendar icon from the trigger.
Custom Icon
Pass any ReactNode via the icon prop to replace the default calendar icon.
API
| Property | Type | Default | Description |
|---|---|---|---|
value | Date | null | Controlled date value | |
defaultValue | Date | null | Initial value for uncontrolled usage | |
onChange | (date: Date | null) => void | Called when the date changes. Receives null when cleared | |
placeholder | string | "Select date" | Placeholder shown when no date is selected |
format | string | "MM/DD/YYYY" | Display format. Tokens: YYYY, MM, DD |
disabled | boolean | false | Disable the picker |
clearable | boolean | false | Show a clear button when a date is selected |
size | "sm" | "md" | "lg" | "md" | Size preset |
minDate | Date | Earliest selectable date | |
maxDate | Date | Latest selectable date | |
disabledDate | (date: Date) => boolean | Custom function to disable specific dates | |
label | string | Label rendered above the trigger | |
required | boolean | false | Mark label as required |
error | string | Error message shown below the picker | |
hint | string | Hint text shown below the picker | |
showIcon | boolean | true | Show or hide the calendar icon in the trigger |
icon | ReactNode | Replace the default calendar icon with a custom element | |
locale | string | DatePickerLocale | auto | Language for month names, weekdays and Today button. Pass a BCP-47 tag ("vi", "en") or a custom locale object. Auto-detects from <html lang="…"> when omitted. |
rounded | "none" | "sm" | "md" | "lg" | "full" | Border-radius preset | |
className | string | Additional class on the root element |
