HTML 时间输入字段的最小值和最大值属性在几分钟内不起作用答案

【问题标题】：HTML time input field minimum and maximum attributes not working for minutesHTML 时间输入字段的最小值和最大值属性在几分钟内不起作用
【发布时间】：2016-07-21 12:33:26
【问题描述】：

所以我使用 angular 创建了一个简单的移动应用程序，并且在 html 的一部分中我有这个：

<input id="timeSelected" type="time" min="{{minTimeToPresent}}" max="{{maxTimeToPresent}}" ng-model="date.time" class="time-input" ng-change="checkTheSelectedTime()"/>

这是我非常简单的“时间选择器”，它工作得非常好，我已经动态地给元素一个最小值和最大值，正如你所看到的，最小值和最大值适用于时间的“小时”部分，甚至删除小时数超出应用程序内滚轮的范围（当然是在手机上测试时），但由于某种原因，分钟数不一样。

有趣的是，如果您选择的时间超出分钟范围，则不会触发我的 ng-change 功能，因此如果我的最大值为 "20:30:00"例如并选择时间 "20:31" ng-change 根本不会触发，但如果我选择 "20:30" 它会被触发。

所以它表现得好像它知道最小值和最大值，但我首先想要的是从可选滚轮中删除不正确的 MINUTES，比如小时。

请帮忙，谢谢！

更多细节...

动态设置的时间采用以下格式：例如“21:30:00”
我在加载 DOM 之前设置了最小值和最大值，以便我可以确定将使用正确的值。

【问题讨论】：

对最小值和最大值使用 HTML5 验证器，这是不可能的。这些仅在表单提交时有效。它不能限制分钟，否则如果它小于您的最大值，它将阻止用户选择有效时间。

标签： html angularjs input time

【解决方案1】：

我发现无需自己编写自定义内容即可完成此操作的唯一方法是使用UI bootstrap Timepicker

您可以指定最小值和最大值，它将限制用户在输入中更改它。它实时验证输入。听起来这些是您的要求。

这是他们网站上的plunkr 演示，我对其进行了修改，显示了最小和最大验证。您必须以日期格式在控制器代码中指定最小值和最大值。

HTML

 <uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian" max="max" min="min" ></uib-timepicker>

var d = new Date();
d.setHours( 2 );
d.setMinutes( 30 );
$scope.min = d;

var d2 = new Date();
d2.setHours( 11 );
d2.setMinutes( 0 );
$scope.max = d2;

【讨论】：