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.

WARNING

This feature requires v3.6.0

Installation

Labs components require a manual import and installation of the component.

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.

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.

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.

Calendar icon

You can move the calendar icon within the input or entirely by utilizing the prepend-icon and prepend-inner-icon properties.

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.