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.

API

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.