Bootstrap Vue Timepicker需求：选小时后自动设分钟为00且初始为空

云上老周

2026-8-22

解决方案

要实现打开Bootstrap Vue Timepicker时小时和分钟为空，且选择小时后自动将分钟设为00，可按以下方式修改代码：

1. 保留初始空状态

你当前在data中已经将meditation.start.time设为空字符串，这部分无需改动，Timepicker会正常显示label-no-time-selected设置的提示文本。

2. 修改时间选择后的处理逻辑

更新meditationTimeChange函数，在用户选择时间后强制将分钟部分固定为00：

meditationTimeChange(id) {
  if (id.time === '') {
    id.status = false;
  } else {
    // 拆分时间字符串，将分钟替换为00
    const [hour] = id.time.split(':');
    id.time = `${hour}:00`;
    id.status = true;
  }
  this.meditationValid();
}

3. 可选：限制分钟选择范围

如果想从源头避免用户选择非00的分钟，可以给Timepicker添加minute-step="60"属性，让分钟选择器仅显示00选项：

<b-form-timepicker 
    v-model="meditation.start.time"                     
    locale="en" 
    :state="meditation.start.status"
    class="m-1"
    now-button
    required                    
    @input="meditationTimeChange(meditation.start)"
    label-close-button="Close"
    label-no-time-selected="Start Time"
    minute-step="60" <!-- 添加该属性 -->
>
</b-form-timepicker>

最终效果：