如何在Vuetify表单中实现日期时间合一的输入字段

当然有啦！在Vuetify生态里，完全能实现单个输入字段同时录入日期和时间，不用再分开两个日期输入框。下面给你两种实用的实现方案，你可以根据自己的项目版本和需求来选：

方案一：原生datetime-local输入类型（快速简单） #

你可以直接给v-text-field设置type="datetime-local"，这是HTML5原生支持的日期时间输入类型，Vuetify会兼容它的基础功能：

<v-form @submit.prevent="addEvent">
  <v-text-field 
    v-model="startDateTime" 
    type="datetime-local" 
    label="Start Date & Time (required)"
    required
  ></v-text-field>
  <v-text-field 
    v-model="endDateTime" 
    type="datetime-local" 
    label="End Date & Time (required)"
    required
  ></v-text-field>
  
  <v-btn type="submit" color="primary" class="mr-4" @click.stop="dialog = false">
    Add Event
  </v-btn>
</v-form>

这种方式的优点是代码极简，不需要额外组件；但缺点也很明显：样式完全依赖浏览器渲染，可能和Vuetify的整体设计风格不统一，而且部分旧浏览器的支持度有限。

方案二：Vuetify组件组合（风格统一，体验更好） #

如果想要和Vuetify的UI风格完全契合，推荐用v-menu+日期/时间选择器的组合方式，这种方案可定制性更强，用户体验也更流畅。

适配Vuetify 2的写法 #

需要把v-date-picker和v-time-picker嵌套在v-menu中，绑定同一个日期时间变量：

<template>
  <v-form @submit.prevent="addEvent">
    <!-- 开始日期时间选择器 -->
    <v-text-field
      v-model="startDateTime"
      label="Start Date & Time (required)"
      readonly
      required
      @click="startMenu = true"
      append-icon="mdi-calendar-clock"
    ></v-text-field>
    <v-menu v-model="startMenu" transition="scale-transition" max-width="290px">
      <v-date-picker
        v-model="startDateTime"
        no-title
        scrollable
      >
        <template v-slot:footer>
          <v-time-picker
            v-model="startDateTime"
            full-width
          ></v-time-picker>
          <v-btn text color="primary" @click="startMenu = false">Confirm</v-btn>
        </template>
      </v-date-picker>
    </v-menu>

    <!-- 结束日期时间选择器 -->
    <v-text-field
      v-model="endDateTime"
      label="End Date & Time (required)"
      readonly
      required
      @click="endMenu = true"
      append-icon="mdi-calendar-clock"
    ></v-text-field>
    <v-menu v-model="endMenu" transition="scale-transition" max-width="290px">
      <v-date-picker
        v-model="endDateTime"
        no-title
        scrollable
      >
        <template v-slot:footer>
          <v-time-picker
            v-model="endDateTime"
            full-width
          ></v-time-picker>
          <v-btn text color="primary" @click="endMenu = false">Confirm</v-btn>
        </template>
      </v-date-picker>
    </v-menu>

    <v-btn type="submit" color="primary" class="mr-4" @click.stop="dialog = false">
      Add Event
    </v-btn>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      eventName: '',
      startDateTime: null,
      endDateTime: null,
      startMenu: false,
      endMenu: false
    }
  },
  methods: {
    addEvent() {
      // 处理表单提交逻辑
    }
  }
}
</script>

适配Vuetify 3的写法（更简洁） #

Vuetify 3的v-date-picker新增了show-time属性，直接开启即可同时选择日期和时间，不需要单独嵌套时间选择器：

<template>
  <v-form @submit.prevent="addEvent">
    <!-- 开始日期时间选择器 -->
    <v-menu v-model="startMenu">
      <template v-slot:activator="{ props }">
        <v-text-field
          v-model="startDateTime"
          label="Start Date & Time (required)"
          readonly
          required
          v-bind="props"
          append-icon="mdi-calendar-clock"
        ></v-text-field>
      </template>
      <v-date-picker
        v-model="startDateTime"
        show-time
        time-title="Time"
        locale="en-US"
      ></v-date-picker>
    </v-menu>

    <!-- 结束日期时间选择器 -->
    <v-menu v-model="endMenu">
      <template v-slot:activator="{ props }">
        <v-text-field
          v-model="endDateTime"
          label="End Date & Time (required)"
          readonly
          required
          v-bind="props"
          append-icon="mdi-calendar-clock"
        ></v-text-field>
      </template>
      <v-date-picker
        v-model="endDateTime"
        show-time
        time-title="Time"
        locale="en-US"
      ></v-date-picker>
    </v-menu>

    <v-btn type="submit" color="primary" class="mr-4" @click.stop="dialog = false">
      Add Event
    </v-btn>
  </v-form>
</template>

<script setup>
import { ref } from 'vue'
const eventName = ref('')
const startDateTime = ref(null)
const endDateTime = ref(null)
const startMenu = ref(false)
const endMenu = ref(false)

const addEvent = () => {
  // 处理表单提交逻辑
}
</script>

两种方案各有优劣：原生方式快但样式受限；组件组合方式体验统一、可定制性强，更推荐在Vuetify项目里使用。

内容的提问来源于stack exchange，提问作者JS_is_awesome18