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

问题描述

我在我的应用程序中使用 vue-bootstrap，并在表单中有 2 个字段来填写时间.为此，我正在使用引导程序的 b-form-timepicker 组件，但它似乎没有设置最小值和最大值的功能，以限制可以选择的小时范围.在这种情况下，更好的解决方案是使用其他组件而不是 bootstrap nativo 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 to set min and max values, to limit the range of hours can be selected. The better solution in this case is to use another component than bootstrap nativo timepicker?

推荐答案

解决这个问题的一种方法是使用 moment.js 中的 isBetween() 和 :state 验证状态以提供视觉提示，如果为 false 则阻止表单提交:

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:

模板:

<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 事件，该事件将在时间值更改时触发.你可以把类似的验证代码放在那里.

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

使用 BootstrapVue 的示例验证状态行为:

Sample validation state behavior using BootstrapVue:

在此处了解更多验证状态.

这篇关于如何在引导 timePicker 中设置最小值和最大值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！