DatePicker

Use Date Picker for date input.

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.

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

AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valuedate(DatePicker) / array(DateRangePicker)
readonlywhether DatePicker is read onlybooleanfalse
disabledwhether DatePicker is disabledbooleanfalse
sizesize of Inputstringlarge/medium/small/minilarge
editablewhether the input is editablebooleantrue
clearablewhether to show clear buttonbooleantrue
placeholderplaceholder in non-range modestring
start-placeholderplaceholder for the start date in range modestring
end-placeholderplaceholder for the end date in range modestring
typetype of the pickerstringyear/month/date/dates/datetime/ week/datetimerange/daterange/ monthrangedate
formatformat of the displayed value in the input boxstringsee date formatsYYYY-MM-DD
popper-classcustom class name for DatePicker's dropdownstring
range-separatorrange separatorstring'-'
default-valueoptional, default date of the calendarDateanything accepted by new Date()
default-timeoptional, the time value to use when selecting date rangeDate[]Array with length 2, each item is a Date. The first item for the start date and then second item for the end date
value-formatoptional, format of binding value. If not specified, the binding value will be a Date objectstringsee date formats
namesame as name in native inputstring
unlink-panelsunlink two date-panels in range-pickerbooleanfalse
prefix-iconCustom prefix icon classstringel-icon-date
clear-iconCustom clear icon classstringel-icon-circle-close
validate-eventwhether to trigger form validationboolean-true
disabledDatea function determining if a date is disabled with that date as its parameter. Should return a Booleanfunction
shortcutsan object array to set shortcut optionsobject[{ text: string, value: date / function }]

Events

Event NameDescriptionParameters
changetriggers when user confirms the valuecomponent's binding value
blurtriggers when Input blurscomponent instance
focustriggers when Input focusescomponent instance
calendar-changetriggers when the calendar selected date is changed. Only for daterange[Date, Date]

Methods

MethodDescriptionParameters
focusfocus the Input component

Slots

NameDescription
range-separatorcustom range separator content