Skip to main content

​
Date Picker

The VDatePicker component displays a calendar interface for date selection with various modes and customization options.

​
Usage

<template>
  <v-date-picker
    v-model="date"
    title="Select Date"
  />
</template>

<script setup>
import { ref } from 'vue'

const date = ref(new Date())
</script>

​
API

​
Props

​
modelValue
any
The selected date(s). Type depends on the multiple prop.
​
multiple
boolean | 'range' | number
default:"false"
Enables multiple date selection. Use 'range' for date ranges or a number for a specific count.
​
title
string
default:"$vuetify.datePicker.title"
Title displayed in the picker header.
​
header
string
default:"$vuetify.datePicker.header"
Header text displayed above the calendar.
​
headerColor
string
Color of the header section.
​
headerDateFormat
string
default:"normalDateWithWeekday"
Format for displaying the selected date in the header.
​
viewMode
string
default:"month"
Current view mode. Options: month, months, year.
​
showWeek
boolean
default:"false"
Displays week numbers.
​
showAdjacentMonths
boolean
default:"false"
Shows dates from adjacent months.
​
weeksInMonth
string
default:"dynamic"
How to calculate weeks. Options: dynamic, static.
​
min
any
Minimum selectable date.
​
max
any
Maximum selectable date.
​
allowedDates
Function | Array
Function or array to determine which dates are selectable.
​
disabled
boolean
default:"false"
Disables the date picker.
​
readonly
boolean
default:"false"
Makes the date picker read-only.
​
landscape
boolean
default:"false"
Displays the picker in landscape orientation.

​
Events

​
update:modelValue
(date: any) => void
Emitted when the selected date changes.
​
update:month
(month: number) => void
Emitted when the displayed month changes.
​
update:year
(year: number) => void
Emitted when the displayed year changes.
​
update:viewMode
(mode: string) => void
Emitted when the view mode changes.

​
Slots

​
title
Customize the title section.
​
header
{ header, transition }
Customize the header display.
​
day
{ date, day, month, year }
Customize individual day cells.
​
month
{ month, year }
Customize month cells in month selection view.
​
year
{ year }
Customize year cells in year selection view.

​
Examples

​
Range Selection

<template>
  <v-date-picker
    v-model="dateRange"
    multiple="range"
    title="Select Date Range"
  />
</template>

<script setup>
import { ref } from 'vue'

const dateRange = ref([])
</script>

​
Multiple Dates

<template>
  <v-date-picker
    v-model="dates"
    :multiple="true"
    title="Select Multiple Dates"
  />
</template>

<script setup>
import { ref } from 'vue'

const dates = ref([])
</script>

​
With Min/Max Dates

<template>
  <v-date-picker
    v-model="date"
    :min="minDate"
    :max="maxDate"
  />
</template>

<script setup>
import { ref } from 'vue'

const date = ref(new Date())
const minDate = new Date('2024-01-01')
const maxDate = new Date('2024-12-31')
</script>

​
Custom Allowed Dates

<template>
  <v-date-picker
    v-model="date"
    :allowed-dates="allowedDates"
  />
</template>

<script setup>
import { ref } from 'vue'

const date = ref(new Date())

// Only allow weekdays
function allowedDates(date) {
  const day = new Date(date).getDay()
  return day !== 0 && day !== 6
}
</script>

Build docs developers (and LLMs) love

Get started for freeTalk to us