Vuetify Vue.js中如何实现单次选择日期时间（DateTimePicker）

我们可以通过两种方式实现单次点击完成日期+时间的选择，无需分两次操作：

一、官方组件组合（无额外依赖） #

把v-date-picker和v-time-picker嵌入同一个v-menu弹窗，用户点击输入框即可打开包含两者的面板，一次弹窗完成日期和时间选择。示例代码：

<template>
  <v-menu
    v-model="isMenuOpen"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    min-width="auto"
  >
    <template v-slot:activator="{ props }">
      <v-text-field
        v-model="displayDatetime"
        label="选择日期时间"
        variant="underlined"
        readonly
        v-bind="props"
        class="mx-2"
      />
    </template>
    <v-card>
      <v-date-picker
        v-model="selectedDate"
        locale="zh-CN"
      />
      <v-time-picker
        v-model="selectedTime"
        full-width
      />
      <v-card-actions class="justify-end">
        <v-btn text @click="isMenuOpen = false">取消</v-btn>
        <v-btn text @click="confirmSelection">确认</v-btn>
      </v-card-actions>
    </v-card>
  </v-menu>
</template>

<script setup>
import { ref, computed } from 'vue'

const isMenuOpen = ref(false)
const selectedDate = ref('')
const selectedTime = ref('')
const datetime = ref(new Date())

// 格式化显示的日期时间文本
const displayDatetime = computed({
  get() {
    return datetime.value ? new Date(datetime.value).toLocaleString('zh-CN') : ''
  },
  set() {} // 只读输入框，无需处理设置逻辑
})

const confirmSelection = () => {
  if (selectedDate.value && selectedTime.value) {
    datetime.value = new Date(`${selectedDate.value}T${selectedTime.value}`)
  }
  isMenuOpen.value = false
}
</script>

二、使用Vuetify封装的第三方组件 #

可以直接使用vuetify-datetime-picker这类第三方包，它是基于Vuetify封装好的日期时间选择器，开箱即用支持单次弹窗完成选择，无需手动组合组件。

不推荐继续使用原生datetime-local #

原生的type="datetime-local"输入框存在样式不统一、移动端兼容性差等问题，和Vuetify的设计体系适配不佳，建议替换为上述两种方案。

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