Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 280
JS_is_awesome18 Avatar asked Jan 26 '23 18:01

JS_is_awesome18


2 Answers

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.

like image 89
Flink Avatar answered Jan 28 '23 06:01

Flink


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

<input type="datetime-local" name="datetime">
like image 26
chans Avatar answered Jan 28 '23 08:01

chans