时间戳

首页 > 解决方案 > 如何在 b-vue-timepicker 中设置开始和结束值

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

问题描述

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

默认组件开始于，00但我需要像在05或开始一样07。

在此处输入图像描述

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

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

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

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

更新：

至少从 2020 年 8 月开始，此功能就在他们的路线图上:(

这是模板代码：

<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>

标签： vue.jsvuejs2timepickerbootstrap-vue

解决方案

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

推荐阅读