5

I have a form in which there are 2 date fields, from date and todate. I am writing a directive to compare this date field.

How to take the from date filed.I am invoking my custom directive on the onBlur of toDate and now need to take fromdate.The form design is as fillows.

<div class="row">
  <div class="col-xs-6 col-sm-6 col-6">
    <label>From date</label>
    <input type="text" id="eduFromDate" name="eduFromDate" class="form-control" 
           ng-model="education.fromDate" ui-date/>
  </div>
  <div class="col-xs-6 col-sm-6 col-6">
    <label>To date</label>
    <input type="text" name="edutoDate" class="form-control" id="edutoDate" 
           ng-model="education.toDate" ui-date before-date/>
    <span class="error input-icon fui-alert" 
          ng-show="historyForm.edutoDate.$error.beforeDate"></span>
  </div>
</div>
Chen-Tsu Lin
  • 22,876
  • 16
  • 53
  • 63
Vishnupriya
  • 111
  • 3
  • 10
  • maybe this [plunker](http://plnkr.co/edit/bTFMzV70vjOzwhimVtQL?p=preview) will help. Are you looking to calculate a date range? – Cory Silva Feb 20 '14 at 08:22
  • possible duplicate of [Custom form validation directive to compare two fields](http://stackoverflow.com/questions/20982751/custom-form-validation-directive-to-compare-two-fields) – Stewie Feb 20 '14 at 10:08
  • @stewie your link helped me a lot in developing the directive. – Vishnupriya Feb 21 '14 at 08:15
  • @Stewie thank you for your link it helped me a lot.I am comparing 2 dates say start date and end date.In one of my form clone of these elements are taken.So how can I recognize each element differently.Below given is my html code and directive. – Vishnupriya Feb 24 '14 at 12:29

1 Answers1

0

My directive code is as follows.

directives.directive('beforeDate', [
    function() {

        var link = function($scope, $element, $attrs, ctrl) {

            var validate = function(viewValue) {
                var comparisonModel = $attrs.beforeDate;
                console.log(new Date(comparisonModel));
                if(!viewValue || !comparisonModel){
                    ctrl.$setValidity('beforeDate', true);
                }
                ctrl.$setValidity('beforeDate', new Date(viewValue) > new Date(comparisonModel) );
                return viewValue;
            };

            ctrl.$parsers.unshift(validate);
            ctrl.$formatters.push(validate);

            $attrs.$observe('beforeDate', function(comparisonModel){
                console.log('comparisonModel '+comparisonModel)
                return validate(ctrl.$viewValue);
            });

        };

        return {
            require: 'ngModel',
            link: link
        };

    }
]);

and in the form I have given like

<span ng-repeat="education in userEducation">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-6">
      <label>From date</label>
      <input type="text" id="eduFromDate" name="eduFromDate" class="form-control" ng-model="education.fromDate" ui-date>
    </div>
    <div class="col-xs-6 col-sm-6 col-6">
      <label>To date</label>
      <div class="form-group has-success">
        <input type="text" name="edutoDate" class="form-control" id="edutoDate" ng-model="education.toDate" ui-date before-date="eduFromDate">
        <span class="error input-icon fui-alert" ng-show="historyForm.edutoDate.$error.beforeDate"></span>
      </div>
    </div>
  </div>
</span>
glepretre
  • 8,154
  • 5
  • 43
  • 57
Vishnupriya
  • 111
  • 3
  • 10