Directive for comparing two dates

Question

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
};

 }
 ]);
 });

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.

Here is plunker for the same. http://plnkr.co/edit/UPN1g1JEoQMSUQZoCDAk?p=preview

Answer 1

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. Remove the $attrs.$observe

2. Create and apply a higherThan directive to the other field

3. 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>