如何在 Vuetify 文本输入字段中输入日期和时间答案

【问题标题】：How to input date and time in a Vuetify text input field如何在 Vuetify 文本输入字段中输入日期和时间
【发布时间】：2019-10-09 12:48:03
【问题描述】：

我正在尝试构建一个 Vuetify 表单，该表单可以输入包含事件日期和特定时间的日期格式，用于开始和结束。到目前为止，我有以下内容：

            <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>

是否有一种输入类型允许在同一个输入字段中输入日期和时间？如果是这样，我该如何实现这样的字段？谢谢！

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

有用于选择日期和时间的 Vuetify 组件，但没有组合。

您可以查看一个基本的 html 组件：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

否则你将不得不制作一个自定义的。

【讨论】：

【解决方案2】：

在 HTML 方式中，你可以使用 datetime-local 作为类型

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

【讨论】：

【解决方案3】：

是否有一种输入类型允许在同一个输入字段中同时输入日期和时间？

如果您设置type="datetime-local" 而不是"date"，Vuetify 中的v-text-field 组件允许您一起选择日期和时间。

datetime-local的解释：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

【讨论】：