How To Set Min And Max Value In Bootstrap Timepicker?

I'm using vue-bootstrap in my app, and have 2 fields in a form to fill with time. For it, I'm using b-form-timepicker component of bootstrap, but it appears to not have a function

Solution 1:

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

<div class="md-form">
  <inputplaceholder="Selected time"type="text"id="input-limited-range"class="form-control timepicker"><labelfor="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.

Solution 2:

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

Learn more about validation states here.