如何在引导 timePicker 中设置最小值和最大值？

Question

我在我的应用程序中使用 vue-bootstrap，并在表单中有 2 个字段来填写时间。 为此，我使用的是引导程序的 b-form-timepicker组件，但它似乎没有 function 来设置最小值和最大值，以限制可以选择的小时范围。 在这种情况下，更好的解决方案是使用其他组件而不是 bootstrap nativo timepicker？

Answer 1

解决此问题的一种方法是使用 moment.js 中的isBetween isBetween()和:state验证 state 来提供视觉提示并阻止表单提交（如果为假）：

模板：

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

脚本：

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);
}

您还可以随意使用@input事件，该事件将在时间值更改时触发。 您可以在那里放置类似的验证代码。

使用BootstrapVue的示例验证 state 行为：

在此处了解有关验证状态的更多信息。

Answer 2

请尝试这些代码，如何在引导时间选择器中设置最小值和最大值？

<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"
  });
}); 

我希望这段代码对你有用。

谢谢你。