如何在 b-vue-timepicker 中设置开始和结束值

问题描述

我需要为 bootstrap-vue-timepicker 设置一个时间范围。

默认组件从 00 开始，但我需要从 05 或 07 开始。

这样用户就不用每次都做不必要的点击事件，因为他受到时间范围的限制。

我只在 SO 上找到了这个线程，但解决方案使用 jQuery 或仅验证输入。

您对解决方案有什么建议吗？

当我检查对象时，我看到了标签：aria-valuemin="0" & aria-valuemax="23" 但遗憾的是更改没有带来任何东西。

更新：

此功能在他们的 roadmap since at least Aug 2020 :(

这里是模板代码：

<div class="mt-3">
  <label><strong>{{ $t("desired time") }}</strong></label>

  <b-form-timepicker 
    v-model="desiredTime"
    :placeholder="$t('timepicker placeholder')"
    no-flip
    no-close-button
    offset="0"
    inutes-step="15"
    class="mb-3"
  />
</div>

解决方法

好的，我想出了一个解决方案，我认为它很笨拙，但可能经过一些修改，它可以成为一种方法。我使用 watch 检查 disiredTime 的值并编写了一些简单的逻辑。

new Vue({
  el: '#app',data() {
    return {
      desiredTime: "05:00:00",min_hour_limit: 5,}
  },watch: {
    desiredTime() {
      let splitted_time = this.desiredTime.split(":")
      let hour = splitted_time[0]
      let minute = splitted_time[1]
      let second = splitted_time[2]
      if (Number(hour) < this.min_hour_limit) {
        hour = this.min_hour_limit
      }

      this.desiredTime = `${hour}:${minute}:${second}`
    }
  }
})

<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-form-timepicker v-model="desiredTime" no-flip no-close-button offset="0" minutes-step="15" class="mb-3" :hour12="false" />
</div>

我只是想告诉你我在 watch 中使用的想法和逻辑并不干净。通过使用一些警报，您可以通知用户他们的更改不会改变 desiredTime 的主要值。

bootstrap-vue timepicker timepicker vue.js