Search code examples
javascriptvue.jsvuetify.js

How to input date and time in a Vuetify text input field


I am attempting to build a Vuetify form that enables inputting of a date format that includes both the date and specific time of the event, for both starting and ending. So far, I have the following:

            <v-form @submit.prevent="addEvent">
              <v-text-field v-model="eventName" type="text" label="event name (required)"></v-text-field>
              <v-text-field v-model="start" type="date" label="start (required)"></v-text-field>
              <v-text-field v-model="end" type="date" label="end (required)"></v-text-field>
              <v-btn type="submit" color="primary" class="mr-4" @click.stop="dialog = false">
                Add Event
              </v-btn>
            </v-form>

Is there an input type that allows both date and time to be inputted into the same input field? If so, how can I implement such a field? Thanks!


Solution

  • There are Vuetify components for picking a date and time, but no combined one.

    There is a basic html component you could check out: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

    Otherwise you'll have to make a custom one.