验证时间是未来的时间

Validate time is future time

本文关键字：时间 未来 验证      更新时间：2023-09-26

我想验证我的表单，使输入的时间和日期不是过去的。

我目前有两个输入框，一个用于时间，一个用于日期。它们目前都是使用ng-pattern进行验证的。当这两个输入框都创建了过去的日期时，我如何显示错误(ng-invalid) ?

注意:我可以做实际的过去与未来的计算(使用momentjs)，这是这些输入框的合并，我不知道如何做。据我所知，directive只能在一个元素上工作，而不是两个?

<input type="text" ng-model="startTime" ng-pattern="/^(?:'d|[01]'d|2[0-3]):[0-5]'d$/">
<input type="text" ng-model="startDate" ng-pattern="/^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/">

看一下作用域。$watch，当其中一个值改变时，您可以使用它在控制器中验证两个元素。

看看如何使用不同的输入类型，如datetime。这将把startTime和startDate合并为1 startDateTime。然后，您将根据设置最大值和最小值的方式获得过去或未来的验证。

https://docs.angularjs.org/api/ng/input/input%5Bdatetime-local%5D 

<input type="datetime-local" id="exampleInput" name="input" ng-model="startDateTime"
  placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00" max="2013-12-31T00:00:00" required />

这就是我最终想出的，它与模型紧密相连，这不是很好，但它有效。

m.directive("futureDate", function () {
    return {
        require: "ngModel",
        scope: false,
        link: function (scope, element, attrs, ngModel) {
            ngModel.$validators.futureDate = function (modelValue) {
                var time = attrs["futureDate"] == "time" ? modelValue : scope.startTime;
                var date = attrs["futureDate"] == "date" ? modelValue : scope.startDate;
                var datetime = moment(date + "T" + time);
                return datetime > moment();
            }
        }
    }
});

用法:

<input type="text" ng-model="startTime" data-em-future-date="time">
<input type="text" ng-model="startDate" data-em-future-date="date">

相关文章：