指令用于比较两个日期 [英] Directive for comparing two dates
问题描述
我用下面的code的指令，它比较两个日期（参考<一个href=\"http://stackoverflow.com/questions/20982751/custom-form-validation-directive-to-compare-two-fields\">Custom表单验证指令比较两个字段的）
I have used following code for directive which compares two dates (reference Custom form validation directive to compare two fields)
define(['./module'], function(directives) {
'use strict';
directives.directive('lowerThan', [
function() {
var link = function($scope, $element, $attrs, ctrl) {
ctrl.$setValidity('lowerThan', false);
var validate = function(viewValue) {
var comparisonModel = $attrs.lowerThan;
/*if(!viewValue || !comparisonModel){
// It's valid because we have nothing to compare against
//console.log("It's valid because we have nothing to compare against");
ctrl.$setValidity('lowerThan', true);
}*/
// It's valid if model is lower than the model we're comparing against
//ctrl.$setValidity('lowerThan', parseInt(viewValue, 10) < parseInt(comparisonModel, 10) );
if(comparisonModel){
var to = comparisonModel.split("-");
var t = new Date(to[2], to[1] - 1, to[0]);
}
if(viewValue){
var from=viewValue.split("-");
var f=new Date(from[2],from[1]-1,from[0]);
}
console.log(Date.parse(t)>Date.parse(f));
ctrl.$setValidity('lowerThan', Date.parse(t)>Date.parse(f));
return viewValue;
};
ctrl.$parsers.unshift(validate);
ctrl.$formatters.push(validate);
$attrs.$observe('lowerThan', function(comparisonModel){
// Whenever the comparison model changes we'll re-validate
return validate(ctrl.$viewValue);
});
};
return {
require: 'ngModel',
link: link
};
}
]);
});
但是，当网页加载它第一次显示错误信息。我已经尝试使用CTRL $ setValidity（'lowerThan'，虚假）。使不可见第一次。但它不工作。
but when page is loaded first time it displays error message. i have tried using ctrl.$setValidity('lowerThan', false); to make it invisible first time. but it is not working.
下面是同一plunker。
http://plnkr.co/edit/UPN1g1JEoQMSUQZoCDAk?p=$p$pview
Here is plunker for the same. http://plnkr.co/edit/UPN1g1JEoQMSUQZoCDAk?p=preview
推荐答案
您的指令是好的。你设置你的日期值控制器里面，你设置较低的日期为较高的值，这意味着日期是负载无效。您的指令正确地检测到。如果你不想让你的指令，以验证负载数据，比你需要三样东西：
Your directive is fine. You're setting your date values inside the controller, and you're setting the lower date to a higher value, which means the dates are invalid on load. Your directive correctly detects that. If you don't want your directive to validate your data on load, than you'll need three things:
-
删除$ ATTRS。$观察
Remove the $attrs.$observe
创建并应用 higherThan 指令其他领域
Create and apply a higherThan directive to the other field
告诉你的指令不适用于该模型值（$格式化阵列），但只有输入值（$解析器阵列）。
Tell your directive not to apply to the model value ($formatters array) but only to the input value ($parsers array).
<大骨节病> PLUNKER
'use strict';
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.field = {
min: "02-04-2014",
max: "01-04-2014"
};
});
app.directive('lowerThan', [
function() {
var link = function($scope, $element, $attrs, ctrl) {
var validate = function(viewValue) {
var comparisonModel = $attrs.lowerThan;
var t, f;
if(!viewValue || !comparisonModel){
// It's valid because we have nothing to compare against
ctrl.$setValidity('lowerThan', true);
}
if (comparisonModel) {
var to = comparisonModel.split("-");
t = new Date(to[2], to[1] - 1, to[0]);
}
if (viewValue) {
var from = viewValue.split("-");
f = new Date(from[2], from[1] - 1, from[0]);
}
ctrl.$setValidity('lowerThan', Date.parse(t) > Date.parse(f));
// It's valid if model is lower than the model we're comparing against
return viewValue;
};
ctrl.$parsers.unshift(validate);
//ctrl.$formatters.push(validate);
};
return {
require: 'ngModel',
link: link
};
}
]);
app.directive('higherThan', [
function() {
var link = function($scope, $element, $attrs, ctrl) {
var validate = function(viewValue) {
var comparisonModel = $attrs.higherThan;
var t, f;
if(!viewValue || !comparisonModel){
// It's valid because we have nothing to compare against
ctrl.$setValidity('higherThan', true);
}
if (comparisonModel) {
var to = comparisonModel.split("-");
t = new Date(to[2], to[1] - 1, to[0]);
}
if (viewValue) {
var from = viewValue.split("-");
f = new Date(from[2], from[1] - 1, from[0]);
}
ctrl.$setValidity('higherThan', Date.parse(t) < Date.parse(f));
// It's valid if model is higher than the model we're comparing against
return viewValue;
};
ctrl.$parsers.unshift(validate);
//ctrl.$formatters.push(validate);
};
return {
require: 'ngModel',
link: link
};
}
]);
<form name="form" >
Min: <input name="min" type="text" ng-model="field.min" lower-than="{{field.max}}" />
<span class="error" ng-show="form.min.$error.lowerThan">
Min cannot exceed max.
</span>
<br />
Max: <input name="max" type="text" ng-model="field.max" higher-than="{{field.min}}" />
<span class="error" ng-show="form.max.$error.higherThan">
Max cannot be lower than min.
</span>
</form>
这篇关于指令用于比较两个日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
