TIP
v-date-picker
supports all props, events and slots that are supported by v-calendar
in addition to those listed below.
# Props
# is-inline
Type: Boolean
Description: Displays the calendar picker only (not as a popover).
Default: false
WARNING
is-inline
deprecated in v2.0
# mode
Type: String
Description: Selection mode: "single"
, "multiple"
, "range"
Default: "single"
WARNING
mode
modified in v2.0
# value
Type: Date, Array[Date], Object
Description: Selected date, dates or date range.
Default: null
WARNING
value
modified in v2.0
# is-required
Type: Boolean
Description: Prevents the user from clearing the selected value.
Default: false
TIP
Setting value = null
still allowed through code.
# input-props
Type: Object
Description: Props to apply to the input DOM element.
Default: Reference code
WARNING
input-props
deprecated in v2.0
# update-on-input
Type: Boolean
Description: Update the picker value after every input
event. Otherwise, value is just updated on change
event.
Default: true
# input-debounce
Type: Number
Description: If update-on-input
is enabled, the duration in milliseconds at which the input
event is debounced before updating the date value.
Default: 1000
# drag-attribute
Type: Object
Description: Attribute to use for the dragged selection in "range" mode. The dates
property is ignored.
Default: Reference code
# select-attribute
Type: Object
Description: Attribute to use for the value selection in all modes. The dates
property is ignored.
Default: Reference code
# popover
Type: Object
Description: Properties of the popover to apply for the calendar component.
Default: Reference code
# popover.keepVisibleOnInput
Type: Boolean
Description: Keep the popover visible after a date is selected (only applies for mode: 'date'
), until the visibility
determines that it should hide again.
# popover.modifiers
Type: Array
Description: Modifiers used to modify the behavior of popper.js
(opens new window).
Default: undefined
# popover.placement
Type: String
Description: Default or suggested placement of the popover. This may change as the browser window dimensions change. Valid placements (opens new window) include auto
, top
, right
, bottom
, left
. Each placement can have suffixed variations -start
or -end
.
Default: bottom-start
# popover.positionFixed
Type: Boolean
Description: Uses a fixed
position when displaying the popover. Use this open when the calendar is placed within a container that has overflow: hidden
style applied. Reference popper.js for more details.
Default: false
# popover.visibility
Type: String
Description: Visibility mode for the input/slot popover (hover-focus
, hover
, focus
, visible
, hidden
)
Default: hover-focus
# Events
# input
Description: New date was selected.
Params: value: Date, Array[Date], Object
# drag
Description: Dragged selection was updated. Only valid when mode === "range"
Params: range: Object
# popoverWillShow
Description: Called just before picker popover transitions into view
Params: Object
: Popover content root HTML element.
# popoverDidShow
Description: Called just after picker popover has transitioned into view
Params: Object
: Popover content root HTML element.
# popoverWillHide
Description: Called just before picker popover transitions out of view
Params: Object
: Popover content root HTML element.
# popoverDidHide
Description: Called just after picker popover has transitioned out of view
Params: Object
: Popover content root HTML element.
# Scoped Slots
# default
Description: Default slot to use as the popover anchor for v-date-picker. [1] Not applicable to inline date pickers.
Props:
Reference the section on using custom slots for available props.