Date inputs
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.
Installation
Labs components require manual import and registration with the Vuetify instance.
import { VDateInput } from 'vuetify/labs/VDateInput'
export default createVuetify({
components: {
VDateInput,
},
})
Usage
At its core, the v-date-input component is a basic container that extends v-text-field.
<v-date-input label="Date input"></v-date-input>API
| Component | Description |
|---|---|
| v-date-input | Primary component |
| v-date-picker | Date picker component |
| v-text-field | Text field component |
Guide
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.
TIP:
Use the built in parseISO and toISO methods available as part of the date composable to format and parse the date input. Internally, v-date-input transforms the model into a plain JS Date object.
Props
The v-date-input component extends the v-text-field and v-date-picker component; and supports all of their props.
Model
The default model value is a Date object, but is displayed as formatted text in the input…
Multiple
Using the multiple prop, the default model value is an empty array.
Range
Using the multiple prop with a value of range, select 2 dates to select them and all the dates between them.
TIP:
On mobile devices, when the menu is open, clicking the input a second time will enable editing mode.
Calendar icon
You can move the calendar icon within the input or entirely by utilizing the prepend-icon and prepend-inner-icon properties.
Input format
You can use the input-format prop to change the displayed format of the date in the input. This will make the field expect the same format when typing and pasting values.
Examples
The following are a collection of examples that demonstrate more advanced and real world use of the v-date-input component.
Passenger
In this example, the v-date-input component is used to select a date of birth.