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

Question

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!

Answer 1

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.

Answer 2

In HTML way, you can use datetime-local as type

<input type="datetime-local" name="datetime">