Date Input
This is a Labs component. The API may change in future releases. Import from vuetify/labs/VDateInput.
<template>
<v-date-input
v-model="date"
label="Select Date"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VDateInput } from 'vuetify/labs/VDateInput'
const date = ref(new Date())
</script>
multiple
boolean | 'range' | number
default:"false"
Enables multiple date selection. Use 'range' for date ranges.
Format for displaying the date in the text field.
location
string
default:"bottom start"
Position of the date picker menu.
Controls the visibility of the date picker menu.
Props passed to the internal VMenu component.
Props passed to the internal VDatePicker component.
updateOn
Array
default:"['blur', 'enter']"
Events that trigger model update. Options: blur, enter.
Hides the save/cancel action buttons.
prependIcon
string
default:"$calendar"
Icon displayed at the start of the input.
Emitted when the date value changes.
Emitted when the save action is triggered.
Emitted when the cancel action is triggered.
actions
{ save, cancel, isPristine }
Customize the action buttons in the date picker.
Examples
Range Selection
<template>
<v-date-input
v-model="dateRange"
multiple="range"
label="Select Date Range"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VDateInput } from 'vuetify/labs/VDateInput'
const dateRange = ref([])
</script>
Custom Display Format
<template>
<v-date-input
v-model="date"
label="Birth Date"
display-format="MMMM dd, yyyy"
/>
</template>
With Min/Max Dates
<template>
<v-date-input
v-model="date"
label="Appointment Date"
:min="minDate"
:max="maxDate"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VDateInput } from 'vuetify/labs/VDateInput'
const date = ref(new Date())
const minDate = new Date()
const maxDate = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000) // 30 days from now
</script>
With Actions
<template>
<v-date-input
v-model="date"
label="Event Date"
:hide-actions="false"
>
<template #actions="{ save, cancel }">
<v-btn @click="cancel" variant="text">Clear</v-btn>
<v-btn @click="save" color="primary">Select</v-btn>
</template>
</v-date-input>
</template>
Multiple Dates
<template>
<v-date-input
v-model="dates"
:multiple="true"
label="Select Multiple Dates"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VDateInput } from 'vuetify/labs/VDateInput'
const dates = ref([])
</script>
With Validation
<template>
<v-date-input
v-model="date"
label="Required Date"
:rules="[rules.required, rules.future]"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VDateInput } from 'vuetify/labs/VDateInput'
const date = ref(null)
const rules = {
required: value => !!value || 'Date is required',
future: value => {
if (!value) return true
return new Date(value) > new Date() || 'Date must be in the future'
}
}
</script>
Custom Picker Props
<template>
<v-date-input
v-model="date"
label="Date"
:picker-props="{
showAdjacentMonths: true,
showWeek: true
}"
/>
</template>
Update on Enter Only
<template>
<v-date-input
v-model="date"
label="Date"
:update-on="['enter']"
/>
</template>