Vue.js中如何将12小时制时间转换为24小时制？

针对你当前的代码，只需两处调整即可实现24小时制显示：

1. 给<b-form-input>添加区域设置属性，强制使用24小时制规则
2. 确保绑定的时间值为标准24小时制格式

修改后的完整代码片段 #

<li class="list-inline-item me-3">
  <h5
        class="font-size-14"
        data-toggle="tooltip"
        data-placement="top"
        title="From"
      >
      <label>Start time</label>
      <br />
      <i class="bx bx-time me-1 text-muted">
        <b-form-input class="no-border" 
                      :value="object.start_time.slice(0,5)" 
                      :disabled="!object.can_change" 
                      @input="object.start_time = $event"
                      format="HH:mm" 
                      value-type="format" 
                      type="time" 
                      placeholder="HH:mm"
                      locale="en-GB" <!-- 关键：强制启用24小时制 -->
        ></b-form-input>
      </i>
  </h5>
</li>

关键说明 #

• locale="en-GB"：该属性会强制时间输入框采用24小时制显示逻辑，避免浏览器根据系统区域默认加载12小时制（如美国区域默认12小时格式）
• 确认object.start_time存储的是HH:mm格式的24小时制字符串（例如"14:30"）；如果你的start_time是完整时间戳（如"2024-05-20 14:30:00"），需要将:value的切片改为object.start_time.slice(11,16)来正确截取时分部分
• 你已配置的format="HH:mm"和value-type="format"属性是正确的，它们确保输入和输出的时间格式始终为24小时制时分格式

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