TIP
v-date-picker supports all props, events and slots that are supported by v-calendar in addition to those listed below.
# Props
# mode
Type: String
Description: Selection mode: "date", "dateTime", "time"
Default: "single"
# value
Type: Date, Object
Description: Selected date or date range.
Default: null
# is-range
Type: Boolean
Description: Date value is a date range object.
Default: false
# is24hr
Type: Boolean
Description: Use 24-hr time picker and input format.
Default: false
# minute-increment
Type: Number
Description: Increment amount for the minute select options.
Default: 1
# validHours
Type: Object, Array, Function
Description: Set a range of valid hours, list of valid hours or a function that returns if an hour is valid.
# Object
An object should configure a min and/or max prop. For example,
{min: 7 max: 22}.
# Array
An array should configure any acceptable hours. For example: [0, 3, 4, 5, 10, 15, 16, 17].
# Function
A function should accept an hour and date parts arguments and return true if the hour is valid.
hourIsValid(hour: number, dateParts: Object) {
// Limit hours from 8 to 12 AM only on weekends
return ![1, 7].includes(weekday) || (hour >= 8 && hour <= 12);
}
Default: undefined
# is-required
Type: Boolean
Description: Prevents the user from clearing the selected value.
Default: false
TIP
Setting value = null still allowed through code.
# 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.hideDelay
Introduced in v2.1.0
Type: Number
Description: Amount of milliseconds to delay the popover when hiding. After this delay, the popover transition will start if popover.transition is not none or ``.
Default: 0
# 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.showDelay
Introduced in v2.1.0
Type: Number
Description: Amount of milliseconds to delay the popover when showing. After this delay, the popover transition will start if popover.transition is not none or ``.
Default: 0
# popover.transition
Type: String
Description: Transition to use when displaying the popover (slide-fade, fade, none or ``).
Default: slide-fade
# popover.visibility
Type: String
Description: Visibility mode for the input/slot popover (hover-focus, hover, focus, visible, hidden)
Default: hover-focus
# Methods
To call methods on a component, assign a ref and call the method any time on or after the mounted lifecycle hook.
<v-date-picker ref="datepicker" />
...
mounted() {
// Get reference to the date picker component
const datepicker = this.$refs.datepicker;
// Call method of the component
datepicker.move(new Date());
}
...
# move(Number|String|Date|Object)
# Description
Asynchronously navigates by a given number of months, to a given month or to a given date.
This calls the Calendar.move method under the hood.
async move(arg, opts) => Promise
# focusDate(String|Date)
# Description
Asynchronously navigates to the month for a given date and focuses on that day after transition is complete.
This calls the Calendar.focusDate method under the hood.
async focusDate(date, opts) => Promise
# 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.