比较两个日期的指令 [英] Directive for comparing two dates

问题描述

我已将以下代码用于比较两个日期的指令(参考 自定义表单验证指令来比较两个字段)

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', false);第一次让它不可见.但它不起作用.

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=preview

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:

1. 删除 $attrs.$observe

1. Remove the $attrs.$observe

创建一个higherThan 指令并将其应用到另一个字段

Create and apply a higherThan directive to the other field

告诉您的指令不要应用于模型值($formatters 数组)，而只应用于输入值($parsers 数组).

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屋！