如何让Vuetify v-time-picker支持手动输入且保留时钟选时功能？

核心问题在于原代码里的v-text-field设置了readonly属性，导致无法手动输入。下面是调整后的完整方案，保留时钟选时功能的同时支持手动输入：

修改后的组件代码 #

<v-col align-self="center">
  <v-menu
    ref="menuTimeStart"
    v-model="menuTimeStart"
    :close-on-content-click="false"
    :nudge-right="40"
    :return-value.sync="startTime"
    transition="scale-transition"
    offset-y
  >
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        dense
        v-model="startTime"
        label="Start time"
        prepend-icon="mdi-clock-time-four-outline"
        :disabled="pickerDisabled"
        v-bind="attrs"
        hide-details="auto"
        :rules="rules"
        :error-messages="errorMessage"
        color="tertiary"
        v-on="on"
        class="mr-4 align-center"
        @input="formatTimeInput"
        @keydown.enter="$refs.menuTimeStart.save(startTime)"
      ></v-text-field>
    </template>
    <v-time-picker
      v-if="menuTimeStart"
      v-model="startTime"
      color="tertiary"
      no-title
      @click:minute="$refs.menuTimeStart.save(startTime)"
    ></v-time-picker>
  </v-menu>
</v-col>

配套逻辑处理（Script部分） #

export default {
  data() {
    return {
      menuTimeStart: false,
      startTime: '',
      pickerDisabled: false,
      rules: [
        value => {
          const timeRegex = /^([01]\d|2[0-3]):([0-5]\d)$/;
          return timeRegex.test(value) || '请输入合法的时间格式（如14:30）';
        }
      ],
      errorMessage: ''
    };
  },
  methods: {
    formatTimeInput(value) {
      // 清理非数字字符，自动补全时间格式
      const cleaned = value.replace(/[^0-9]/g, '');
      let formatted = '';
      
      if (cleaned.length >= 2) {
        formatted = `${cleaned.slice(0, 2)}:${cleaned.slice(2, 4)}`;
      } else {
        formatted = cleaned;
      }

      // 限制时间范围合法
      if (formatted.includes(':')) {
        const [hours, minutes] = formatted.split(':');
        const validHours = Math.min(parseInt(hours) || 0, 23);
        const validMinutes = Math.min(parseInt(minutes) || 0, 59);
        this.startTime = `${String(validHours).padStart(2, '0')}:${String(validMinutes).padStart(2, '0')}`;
      } else {
        this.startTime = formatted;
      }
    }
  }
};

关键改动说明 #

• 移除readonly属性：直接开启文本框的手动输入权限，这是实现功能的基础。
• 输入格式化处理：formatTimeInput方法自动清理无效字符、补全冒号，并限制小时≤23、分钟≤59，确保输入符合时间规则。
• 回车快捷操作：添加@keydown.enter事件，用户手动输入完成后按回车即可保存时间并关闭菜单，和时钟选时的操作逻辑保持一致。
• 双向同步保障：文本框和时间选择器绑定同一个startTime变量，两者的操作结果会自动同步，互不影响原有功能。
• 格式验证强化：通过正则表达式验证最终输入的时间格式，避免无效值提交。

内容的提问来源于stack exchange，提问作者Marcelo Del Valle