API
Props
Prop Support
VDatePicker accepts all the same props as VCalendar.
| Name | Type | Default |
|---|---|---|
| mode | 'date' | 'dateTime' | 'time' | 'date' |
| model-value | DatePickerDate | null |
| rules | 'auto' | DatePartsRules | undefined |
| is-required | boolean | false |
| is24hr | boolean | true |
| hide-time-header | boolean | false |
| time-accuracy | number | 2 |
| update-on-input | boolean | true |
| input-debounce | number | 1000 |
| popover | true | Partial<PopoverOptions> | true |
| drag-attribute | AttributeConfig | undefined |
| select-attribute | AttibuteConfig | undefined |
Events
Event Support
VDatePicker emits all the same events as Calendar.
| Event | Parameter Type |
|---|---|
| update:modelValue | DatePickerDate |
| drag | SimpleDateRange | null |
| popover-will-show | HTMLElement |
| popover-did-show | HTMLElement |
| popover-will-hide | HTMLElement |
| popover-did-hide | HTMLElement |
Slots
Event Support
VDatePicker supports all the same slots as Calendar.
| Name | Props |
|---|---|
| default | DatePickerContext |
| time-header |
Types
DatePickerDate
ts
type DatePickerDate = number | string | Date | null | {
start?: number | string | Date | null,
end?: number | string | Date | null
}
SimpleDateRange
ts
{
start: Date;
end: Date;
}
ModelModifiers
ts
interface ModelModifiers {
number?: boolean;
string?: boolean;
range?: boolean;
}
DatePartsRules
ts
interface DatePartsRules {
hours?: DatePartsRule;
minutes?: DatePartsRule;
seconds?: DatePartsRule;
milliseconds?: DatePartsRule;
}
type DatePartsRule =
| number
| Array<number>
| NumberRuleConfig
| DatePartsRuleFunction;
interface NumberRuleConfig {
min?: number;
max?: number;
interval?: number;
}
PopoverOptions
ts
interface PopoverOptions {
visibility: PopoverVisibility; // When the popover appears
placement: Placement; // Where the popover appears
autoHide: boolean; // Auto-hide popover based on visibility
showDelay: number; // Delay (ms) before popover is shown
hideDelay: number; // Delay (ms) before popover is hidden
}
type PopoverVisibility = 'click' | 'hover' | 'hover-focus' | 'focus';