emphasized | meta | related | features | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
true |
|
|
|
The v-date-input
component combines a text field with a date picker. It is meant to be a direct replacement for a standard date input.
::: warning
This feature requires v3.6.0
:::
Labs components require a manual import and installation of the component.
import { VDateInput } from 'vuetify/labs/VDateInput'
export default createVuetify({
components: {
VDateInput,
},
})
At its core, the v-date-input
component is a basic container that extends v-text-field.
Component | Description |
---|---|
v-date-input | Primary component |
v-date-picker | Date picker component |
v-text-field | Text field component |
The v-date-input
component is a replacement for the standard date input. It provides a clean interface for selecting dates and shows detailed selection information.
The v-date-input
component extends the v-text-field and v-date-picker component; and supports all of their props.
The default model value is a Date object, but is displayed as formatted text in the input..
Using the multiple prop, the default model value is an empty array.
Using the multiple prop with a value of range, select 2 dates to select them and all the dates between them.
You can move the calendar icon within the input or entirely by utilizing the prepend-icon and prepend-inner-icon properties.
The following are a collection of examples that demonstrate more advanced and real world use of the v-date-input
component.
In this example, the v-date-input
component is used to select a date of birth.