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

Question

我需要为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>

Answer 1

好的，我想出了一个解决方案，我认为它很老套，但可能经过一些修改，它可以成为一种方法。我用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 的主要值。