DatePicker
A set of pickers for selecting dates, date ranges, or date and time. Smooth, intuitive interfaces make choosing and adjusting values quick and precise.
Date Picker
DateTime Picker
Date Range Picker
Props
| Name | Default | Type |
|---|---|---|
value | "" | string |
modelValue | "" | string |
placement | "bottom-start" | DatePickerPlacement |
format | - | string |
variant | "subtle" | "subtle" | "outline" | "ghost" |
readonly | false | boolean |
placeholder | "Select date" | string |
inputClass | - | string | string[] | Record<string, boolean> |
allowCustom | true | boolean |
autoClose | true | boolean |
disabled | false | boolean |
label | - | string |
clearable | true | boolean |
Slots
| Slot | Payload |
|---|---|
target | { togglePopover: () => void; isOpen: boolean; displayLabel: string; inputValue: string; } |
prefix | { togglePopover: () => void; isOpen: boolean; displayLabel: string; inputValue: string; } |
suffix | { togglePopover: () => void; isOpen: boolean; displayLabel: string; inputValue: string; } |
Emit Events
| Event | Payload |
|---|---|
update:modelValue | [value: string] |
change | [value: string] |