DatePicker
Use Date Picker for date input.
TIP
This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).
Enter Date
Basic date picker measured by 'day'.
Other measurements
You can choose week, month, year or multiple dates by extending the standard date picker component.
Date Range
Picking a date range is supported.
Month Range
Picking a month range is supported.
Default Value
If user hasn't picked a date, shows today's calendar by default. You can use default-value to set another date. Its value should be parsable by new Date().
If type is daterange, default-value sets the left side calendar.
Date Formats
Use format to control displayed text's format in the input box. Use value-format to control binding value's format.
By default, the component accepts and emits a Date object.
Check the list here of all available formats of Day.js.
WARNING
Pay attention to capitalization
Default time for start date and end date
When picking a date range, you can assign the time part for start date and end date.
Set custom content of prefix
The content of prefix can be customized.
Custom content
The content of cell can be customized, in scoped-slot you can get the cell data.
For data details, please refer:
interface DateCell {
column: number
customClass: string
disabled: boolean
end: boolean
inRange: boolean
row: number
selected: Dayjs
isCurrent: boolean
isSelected: boolean
start: boolean
text: number
timestamp: number
date: Date
dayjs: Dayjs
type: 'normal' | 'today' | 'week' | 'next-month' | 'prev-month'
}
Localization
The default locale of is English, if you need to use other languages, please check Internationalization
Note, date time locale (month name, first day of the week ...) are also configured in localization.
Attributes
| Name | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| model-value / v-model | binding value, if it is an array, the length should be 2 | Date / number / string / Array | — | — |
| readonly | whether DatePicker is read only | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false |
| size | size of Input | string | large/default/small | default |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start date in range mode | string | — | — |
| end-placeholder | placeholder for the end date in range mode | string | — | — |
| type | type of the picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date |
| format | format of the displayed value in the input box | string | see date formats | YYYY-MM-DD |
| popper-class | custom class name for DatePicker's dropdown | string | — | — |
| popper-options | Customized popper option see more at popper.js | object | — | — |
| range-separator | range separator | string | — | '-' |
| default-value | optional, default date of the calendar | Date / [Date, Date] | — | — |
| default-time | optional, the time value to use when selecting date range | Date / [Date, Date] | — | — |
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | see date formats | — |
| id | same as id in native input | string / [string, string] | — | — |
| name | same as name in native input | string | — | — |
| unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
| prefix-icon | custom prefix icon component | string | Component | — | Date |
| clear-icon | custom clear icon component | string | Component | — | CircleClose |
| validate-event | whether to trigger form validation | boolean | — | true |
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| shortcuts | an object array to set shortcut options | Array<{ text: string, value: Date | Function }> | — | — |
| cell-class-name | set custom className | Function(Date) | — | — |
| teleported | whether date-picker dropdown is teleported to the body | boolean | true / false | true |
Events
| Name | Description | Parameters |
|---|---|---|
| change | triggers when user confirms the value | (val: typeof v-model) |
| blur | triggers when Input blurs | (e: FocusEvent) |
| focus | triggers when Input focuses | (e: FocusEvent) |
| calendar-change | triggers when the calendar selected date is changed. | (val: [Date, null | Date]) |
| panel-change | triggers when the navigation button click. | (date, mode, view) |
| visible-change | triggers when the DatePicker's dropdown appears/disappears | (visibility: boolean) |
Methods
| Method | Description | Parameters |
|---|---|---|
| focus | focus the Input component | — |
| handleOpen 2.2.16 | open the DatePicker popper | — |
| handleClose 2.2.16 | close the DatePicker popper | — |
Slots
| Name | Description |
|---|---|
| default | custom cell content |
| range-separator | custom range separator content |