[Vuejs]-How to set start and end values in b-vue-timepicker

by

0👍

Ok, I came up with one solution, I think it’s hacky, but probably with some modification, it can be an approach. I used watch to check the value of disiredTime and wrote some simple logic.

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>

I just want to give you the idea and the logic that I used in watch is not clean. By using some alerts, you can notify the users that their changing are not going to change the main value of the desiredTime.

Leave a comment