[Vuejs]-How to set min and max value in bootstrap timePicker?

0👍

One way you could approach this is to use isBetween() from moment.js and the :state validation state to provide a visual cue and block form submission if false:

Template:

<b-form-timepicker v-model='time' :state='isValidTime' >

Script:

import moment from 'moment';

...

format = 'hh:mm:ss';
time = null;
minTime = moment('10:30:00', this.format);
maxTime = moment('14:40:00', this.format);

get isValidTime() {
  return moment(this.time, this.format).isBetween(this.minTime, this.maxTime);
}

You also have the @input event at your disposal which will fire when the time value changes. You could put similar validation code there.

Sample validation state behavior using BootstrapVue:
enter image description here

Learn more about validation states here.

0👍

Please try these codes, To How to set the min and max values in the bootstrap time picker?

<div class="md-form">
  <input placeholder="Selected time" type="text" id="input-limited-range" class="form-control timepicker">
  <label for="input-limited-range">Try me</label>
</div>

$( document ).ready(function() {
  $('#input-limited-range').pickatime({
    twelvehour: true,
    min: "8:20am",
    max: "5:15pm"
  });
}); 

I hope this code will be useful to you.

Thank you.

Leave a comment