How to pass controller Function variable to Datepicker Directive?

Question

I am new to Angularjs. I have put 2 Datepickers. I need that When I select date from first datepicker then the smaller dates from that date should be disabled in second Datepicker. I am unable to set "minDate" for second Datepicker directive.

Below is my code :

HTML Code :

<div ng-controller='TestController'>

  <label>From Date :</label>
  <input type="text" id="1" datepicker="" ng-init="variable=''"
         ng-model="startDate" ng-change="test()" />

  <label>To Date :</label>
  <input type="text" id="2" callFuc="test()" datepicker1=""
         ng-model="endDate" />
</div>

Js Code:

app.controller('TestController', function($scope, $window) {
  $scope.test = function() {
    $scope.variable = $scope.startDate;
    $window.alert("From date is" + $scope.variable);
  };
});

app.directive('datepicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      $('#1').datepicker({
        minDate: 0,
        onSelect: function(dateText) {
          scope.$apply(function() {
            ngModel.$setViewValue(dateText);
          });
        }
      });
    }
  };
});

app.directive('datepicker1', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      $('#2').datepicker({
        minDate: scope.test(),
        onSelect: function(dateText) {
          scope.$apply(function() {
            ngModel.$setViewValue(dateText);
          });
        }
      });
    }
  };
});

I am able to disable past dates in first Datepicker using minDate : "0".
But I am unable to set minDate properly for the second Datepicker. I am not able to fetch selected date from the First Datepicker and pass it to "datepicker1" directive. Any help or suggestion will be appreciated.

Update

I have updated code. Kindly review it.

https://plnkr.co/edit/ohCFzpwLGgFPPH49jybq?p=preview

Which jQuery datepicker library does the code use?

georgeawg
– georgeawg

2018-07-19 17:07:23 +00:00
Commented Jul 19, 2018 at 17:07 — georgeawg
– georgeawg, Commented Jul 19, 2018 at 17:07
jquery ui datepicker

Arun
– Arun

2018-07-20 06:27:09 +00:00
Commented Jul 20, 2018 at 6:27 — Arun
– Arun, Commented Jul 20, 2018 at 6:27

georgeawg · Accepted Answer · 2018-07-19 17:19:56Z

1

The datepicker directive needs to watch for changes and update minDate as needed:

app.directive('datepicker1', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      scope.$watch(attr.minDate, function(value) {    
          el.datepicker({
            minDate: value,
            onSelect: function(dateText) {
              scope.$apply(function() {
                ngModel.$setViewValue(dateText);
              });
            }
          });
      });
    }
  };
});

Usage:

  <label>To Date :</label>
  <input type="text" min-date="variable" datepicker1
         ng-model="endDate" />

answered Jul 19, 2018 at 17:19

georgeawg

49k13 gold badges77 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arun Over a year ago

Thanks for the information. I tried this code. value is coming proper as per the Date changed from the first Date picker. But for the second datepicker, all dates are coming enabled. It seems that minDate is not getting that value

georgeawg Over a year ago

The next step would be to create a PLNKR to reproduce the problem.

Arun Over a year ago

I have updated code. Kindly review it. plnkr.co/edit/ohCFzpwLGgFPPH49jybq?p=preview

Collectives™ on Stack Overflow

How to pass controller Function variable to Datepicker Directive?

Update

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

Update

1 Answer 1

3 Comments

Related