Vuetify 2时间选择器转传统样式方案及Vue传统时间选择器推荐

一、Vuetify 2内置修改方案 #

Vuetify 2的v-time-picker支持切换为传统的下拉选择/文本输入模式，无需额外引入组件，仅需配置对应属性：

• 添加mode="dropdown"，即可将钟表界面替换为下拉选择的传统样式，用户可直接选择时分或手动输入时间
• 搭配no-title可隐藏默认标题，简化界面
• 示例代码：

<template>
  <v-time-picker
    v-model="selectedTime"
    mode="dropdown"
    no-title
    format="24hr"
  ></v-time-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: null
    }
  }
}
</script>

若要贴近原生输入框体验，可结合v-text-field与时间选择器联动，点击输入框弹出选择面板：

<template>
  <v-menu
    v-model="menuOpen"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    max-width="290px"
    min-width="290px"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        v-model="selectedTime"
        label="选择时间"
        readonly
        v-bind="attrs"
        v-on="on"
      ></v-text-field>
    </template>
    <v-time-picker
      v-model="selectedTime"
      mode="dropdown"
      format="24hr"
      @click:save="menuOpen = false"
      @click:cancel="menuOpen = false"
    ></v-time-picker>
  </v-menu>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: null,
      menuOpen: false
    }
  }
}
</script>

二、第三方Vue传统时间选择器推荐 #

如果内置方案无法满足需求，可考虑以下适配Vue 2的轻量组件：

• vue2-timepicker：专为Vue 2打造的传统时间选择器，支持12/24小时制、分钟间隔设置，样式简洁易定制
• Element UI TimePicker：典型的下拉式传统时间选择器，支持范围选择、禁用时间段等功能，若项目已引入Element UI可直接使用
• vue-time-select：轻量级核心时间选择组件，体积小巧，适合对包体积有要求的场景

注意：选择第三方组件时，需确认其兼容Vue 2版本，避免版本冲突。

内容的提问来源于stack exchange，提问作者Lynette García