Question

所以我使用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分零零秒”
我在加载DOM之前设置了最小值和最大值，这样我就可以确定将使用正确的值。

Answer 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>

<强> JS

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;

HTML时间输入字段最小和最大属性不能用于分钟

1 个答案: