DatePicker ​

Use Date Picker for date input.

Enter Date ​

Basic date picker measured by 'day'.

The measurement is determined by the type attribute. You can enable quick options via shortcuts property. The disabled date is set by disabledDate, which is a function.

Default
Picker with quick options

Other measurements ​

You can choose week, month, year or multiple dates by extending the standard date picker component.

Week
Dates
Year
Years
Month
Months

Date Range ​

Picking a date range is supported.

When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the unlink-panels attribute.

Default
To
With quick options
To

Month Range ​

Picking a month range is supported.

When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the unlink-panels attribute.

Default
To
With quick options
To

Year Range 2.8.0 ​

Picking a year range is supported.

When in range mode, the left and right panels are linked by default. If you want the two panels to switch years independently, you can use the unlink-panels attribute.

Default
To
With quick options
To

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
daterange
-

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

Emits Date object
Value:
Use value-format
Value：
Timestamp
Value：

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.

By default, the time part of start date and end date are both 00:00:00. Setting default-time can change their time respectively. It accepts an array of up to two Date objects. The first string sets the time for the start date, and the second for the end date.

Component value：

-

Set custom content of prefix ​

The content of prefix can be customized.

Setting prefix-icon to component which you import form other .vue or generated by the render function.

set prefix-icon

pre

Custom content ​

The content of cell can be customized, in scoped-slot you can get the cell data. Note that the custom content structure should be consistent with the default structure, otherwise style misalignment may occur.

Custom icon 2.8.0 ​

Custom icons available with slots.

date
date range
-
month range
-
year range
To

For data details, please refer:

ts
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.

API ​

Attributes ​

NameDescriptionTypeDefault
model-value / v-modelbinding value, if it is an array, the length should be 2number / string / object''
readonlywhether DatePicker is read onlybooleanfalse
disabledwhether DatePicker is disabledbooleanfalse
sizesize of Inputenum—
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 pickerenumdate
formatformat of the displayed value in the input boxstring see date formatsYYYY-MM-DD
popper-classcustom class name for DatePicker's dropdownstring—
popper-optionsCustomized popper option see more at popper.jsobject{}
range-separatorrange separatorstring'-'
default-valueoptional, default date of the calendarobject—
default-timeoptional, the time value to use when selecting date rangeobject—
value-formatoptional, format of binding value. If not specified, the binding value will be a Date objectstring see date formats—
idsame as id in native inputstring / object—
namesame as name in native inputstring / object''
unlink-panelsunlink two date-panels in range-pickerbooleanfalse
prefix-iconcustom prefix icon component. By default, if the value of type is TimeLikeType, the value is Clock, else is Calendarstring / object''
clear-iconcustom clear icon componentstring / objectCircleClose
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 optionsobject[]
cell-class-nameset custom classNameFunction—
teleportedwhether date-picker dropdown is teleported to the bodybooleantrue
empty-values 2.7.0empty values of component, see config-providerarray—
value-on-clear 2.7.0clear return value, see config-providerstring / number / boolean / Function—
fallback-placements 2.8.4list of possible positions for Tooltip popper.jsarrary—
placement 2.8.4position of dropdownPlacementbottom

Events ​

NameDescriptionType
changetriggers when user confirms the valueFunction
blurtriggers when Input blursFunction
focustriggers when Input focusesFunction
clear 2.7.7triggers when the clear icon is clicked in a clearable DatePickerFunction
calendar-changetriggers when the calendar selected date is changed.Function
panel-changetriggers when the navigation button click.Function
visible-changetriggers when the DatePicker's dropdown appears/disappearsFunction

Slots ​

NameDescription
defaultcustom cell content
range-separatorcustom range separator content
prev-month 2.8.0prev month icon
next-month 2.8.0next month icon
prev-year 2.8.0prev year icon
next-year 2.8.0next year icon

Exposes ​

NameDescriptionType
focusfocus the DatePicker componentFunction
blur 2.8.7blur the DatePicker componentFunction
handleOpen 2.2.16open the DatePicker popperFunction
handleClose 2.2.16close the DatePicker popperFunction

Type Declarations ​

Show declarations
ts
import type { Options as PopperOptions } from '@popperjs/core'

type TimeLikeType = 'datetime' | 'datetimerange'

type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'

Source ​

Component • Style • Docs

Contributors ​