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

【问题标题】：How to set min and max value in bootstrap timePicker?如何在引导 timePicker 中设置最小值和最大值？
【发布时间】：2021-02-22 21:09:21
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js frontend timepicker bootstrap-vue

【解决方案1】：

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

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

希望这段代码对你有用。

谢谢。

【讨论】：

【解决方案2】：

您可以解决此问题的一种方法是使用 moment.js 中的 isBetween() 和 :state 验证状态来提供视觉提示并在为 false 时阻止表单提交：

模板：

<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 的示例验证状态行为：

详细了解validation states here。

【讨论】：