验证多个日期字段

时间:2014-11-19 10:12:41

标签: javascript angularjs validation angularjs-directive

我正在创建一个表单我有一个日期选择器和一个时间戳,用于开始日期和结束日期。 总共我有4个领域。 我希望能够验证startdate(startDate和startTime的组合)是否早于enddate。但我似乎无法弄清楚我应该在何处以及如何进行此验证。

因此,无论何时编辑其中一个字段,都应触发验证。

我似乎无法弄清楚在何处以及如何创建此验证,我已经尝试创建一个名为method-validation的自定义验证,该验证可以从控制器检索一个方法,然后决定是否验证是支持者,但我不能只把它放在一个字段上,因为如果我改变另一个字段,验证就不会被触发。

如何让这个工作?

底线是,我希望能够将2个和2个字段设置在一起,并进行比较,并在结束小于开始时显示消息。

跟进:

问题不是比较两个日期。我能做到的。

<input type="text" ng-model="activity.startDate" date-picker>
<input type="text" ng-model="activity.startTime" time-picker>

<input type="text" ng-model="activity.endDate" date-picker>
<input type="text" ng-model="activity.endTime" time-picker>

确保两个字段的组合不会

1 个答案:

答案 0 :(得分:0)

module.directive('validDate', function(){
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            function  validator(value){
                var valid = true;
                if (value != undefined) {
                  value = moment(value, 'YYYY-MM-DD').format('YYYY-MM-DD'); 
                  if (((attrs.validDate == 'start') && (value >= scope.$eval(attrs.otherDate))) || ((attrs.validDate == 'end') && ((value < scope.$eval(attrs.otherDate))))) {
                    valid = false;
                  }                        
                 } else {
                   valid = false;
                 }

                ctrl.$setValidity('date-valid', valid); 
                return value;
            }

            scope.$watch([attrs.otherDate, attrs.ngModel] ,function(newValue) {
                validator(scope.$eval(attrs.ngModel));
                }, true);                        
        }
    };
});

用法:

<input type="date" ng-model="startDate" valid-date="start" other-date="endDate" />
<input type="date" ng-model="endDate" valid-date="end" other-date="startDate" />

让我知道它是否有效。我在这里使用MomentJS library进行格式化,但随时可以更改它。