如何在Vuetify VTimePicker组件中选择PM时段

问题说明 #

使用Vuetify的VTimePicker组件时，点击PM按钮无反应，无法选择下午时段，但小时和分钟可正常选择。

解决步骤 #

• 启用12小时制配置
  VTimePicker默认采用24小时制（format="24hr"），此时AM/PM切换按钮处于禁用状态。要激活时段切换功能，必须显式设置format="12hr"：

  <v-time-picker
    v-model="selectedTime"
    format="12hr"
  ></v-time-picker>
  

• 确认绑定值的有效性
  确保v-model绑定的时间值是组件可解析的格式（如Date对象、标准时间字符串）。如果绑定的是24小时制时间（比如"18:10"），组件会自动转换为对应的12小时制显示（6:10 PM），前提是已经配置了format="12hr"。

• 官方示例页面的测试调整
  官方示例默认可能是24小时制配置，直接在示例代码编辑区修改format属性为12hr，即可让AM/PM按钮变为可点击状态，正常切换选择下午时段。

界面截图 #

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