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.

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

NameDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding value, if it is an array, the length should be 2Date / number / string / Array
readonlywhether DatePicker is read onlybooleanfalse
disabledwhether DatePicker is disabledbooleanfalse
sizesize of Inputstringlarge/default/smalldefault
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 calendarDate / [Date, Date]
default-timeoptional, the time value to use when selecting date rangeDate / [Date, Date]
value-formatoptional, format of binding value. If not specified, the binding value will be a Date objectstringsee date formats
idsame as id in native inputstring / [string, string]
namesame as name in native inputstring
unlink-panelsunlink two date-panels in range-pickerbooleanfalse
prefix-iconcustom prefix icon componentstring | ComponentDate
clear-iconcustom clear icon componentstring | ComponentCircleClose
validate-eventwhether to trigger form validationbooleantrue
disabled-datea function determining if a date is disabled with that date as its parameter. Should return a Booleanfunction
shortcutsan object array to set shortcut optionsArray<{ text: string, value: Date | Function }>
cell-class-nameset custom classNameFunction(Date)
teleportedwhether date-picker dropdown is teleported to the bodybooleantrue / falsetrue

Events

NameDescriptionParameters
changetriggers when user confirms the value(val: typeof v-model)
blurtriggers when Input blurs(e: FocusEvent)
focustriggers when Input focuses(e: FocusEvent)
calendar-changetriggers when the calendar selected date is changed. Only for daterange(val: [Date, Date])
panel-changetriggers when the navigation button click.(date, mode, view)
visible-changetriggers when the DatePicker's dropdown appears/disappears(visibility: boolean)

Methods

MethodDescriptionParameters
focusfocus the Input component
handleOpenopen the DatePicker popper
handleCloseclose the DatePicker popper

Slots

NameDescription
defaultcustom cell content
range-separatorcustom range separator content

Source

ComponentDocs

Contributors