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:
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.
- [Vuejs]-Update not working using vuejs3 and json it gives empty for the course fields
- [Vuejs]-How to assign unique IDs to inputs from an input form
Source:stackexchange.com