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.