Javascript 用于日期输入表单验证的AngularJS自定义指令

我有一个用Angular 1.5.3编写的应用程序

以下是我想做的：

我有一个用户表单，有两种日期输入类型。我需要在表单中添加一些自定义验证。当表单上的“到期日期”大于表单上的“生效日期”时，我想向用户显示一条错误消息

我相信我可以通过自定义指令和ng消息来实现这一点

以下是我的代码片段：

 <form name="form.mainForm">

      <div>
        <span>Effective Date: </span>
        <input required type="date" name="effectiveDate" ng-model="effectiveDate" />

        <div>
          <span>Expiry Date: </span>
          <input 
            type="date" 
            name="expiryDate" 
            ng-model="expiryDate" 
            date-greater-than="{{ effectiveDate }}" />
        </div>
      </div>
  </form>


app.directive('dateGreaterThan', function () {
      return {
                restrict: 'A',
        require: 'ngModel',
        scope: false,
        link: function (scope, elm, attrs, ctrl) {
            console.log(' here we are ');

            function isValidDateRange(expiryDate, effectiveDate) {

                console.log(expiryDate, effectiveDate);

                if (effectiveDate == null || expiryDate == null ) {
                    return true;
                }

                return effectiveDate > expiryDate;
            }

            function validateDateRange(inputValue) {
                var expiryDate = inputValue;
                var effectiveDate = scope.effectiveDate;
                var isValid = isValidDateRange(expiryDate, effectiveDate);
                console.log("isValid: ", isValid);
                ctrl.$setValidity('dateGreaterThan', isValid);
                return inputValue;
            }

            ctrl.$parsers.unshift(validateDateRange);
            ctrl.$formatters.push(validateDateRange);
            attrs.$observe('dateGreaterThan', function () {
                validateDateRange(ctrl.$viewValue);
            });
      }
      };

生效日期：
到期日：
应用程序指令（'dateGreaterThan'，函数（）{
返回{
限制：“A”，
要求：'ngModel'，
范围：假，
链接：函数（范围、elm、属性、ctrl）{
log（'我们到了'）；
函数IsValidDataRange（expiryDate、effectiveDate）{
console.log（expiryDate，effectiveDate）；
if（effectiveDate==null | | expiryDate==null）{
返回true；
}
返回生效日期>到期日期；
}
函数ValidatedTerange（inputValue）{
var expiryDate=输入值；
var effectiveDate=scope.effectiveDate；
var isValid=isValidDateRange（到期日，生效日）；
log（“isValid:”，isValid）；
ctrl.$setValidity（'dateGreaterThan'，isValid）；
返回输入值；
}
ctrl.$parsers.unshift（ValidatedTerange）；
ctrl.$formatters.push（ValidatedTerange）；
属性$observe（'dateGreaterThan'，函数（）{
ValidatedTerange（ctrl.$viewValue）；
});
}
};

我试图在这里解决这个问题，但我无法让我的指令正常工作。它似乎无法计算它们更改的日期，也无法与ng消息集成

以下是我的尝试：

---

ngMessages模块应从cdn加载，或与软件包管理器一起安装。 ngMessages模块不包含在AngularJS中

其他一些要点。使用ngModel中的$validator

ctrl.$validators.dateGreaterThan = validateDateRange;

使用范围属性传递其他日期

 scope: {dateGreaterThan: '='},

我想还有很多需要改进的地方。我也忘了一些AngularJS的东西。 f、 e:您可以在第一个日期更改时再次触发验证。请检查的$validate功能

您可以检查此小提琴的基本设置：

 scope: {dateGreaterThan: '='},