sankycse sankycse - 1 year ago 63
AngularJS Question

Can not change datepicker parameter on change in another datepicker?

I have two datepicker inside a form. When the user select the first date, the min and max date of the second datepicker should be updated( one year from the selection). But in my case the min and max date update only once, when I select date in first datepicker for the first time. But if I change the selection, the second datepicker not revised with the changed value.

html:

<div class="form-group">
<label>Model Production Date</label>
<input date-picker1 type="text" class="form-control" placeholder="Production Date" ng-model="productionDate">
</div>
<div class="form-group">
<label>Next Review Date</label>
<input date-picker2 type="text" class="form-control" placeholder="Next Review Date" ng-model="nextReviewDate">
</div>


Js:

.directive('datePicker1', function () {

return function (scope, element, attrs) {

element.datepicker({
format: "yyyy/mm/dd",
todayHighlight: true,
//startDate: stDate || new Date(),
//endDate:enDate || new Date(),
autoclose: true
});
scope.$watch('productionDate', function (newVal, oldVal) {

if(newVal){
scope['productionDate'] = newVal;
}
else{
return;
}
});
};

})



.directive('datePicker2', function () {

return {
restrict: 'A',
link: linker,

}

function linker(scope, $element, attrs) {


scope.$watch('productionDate', function (newVal, oldVal) {
console.log('productionDate===='+scope.productionDate);
splittedDateString = scope.productionDate.split('/');
stDate = new Date(splittedDateString[0], splittedDateString[1]-1, splittedDateString[2]);
enDate = new Date(stDate.getFullYear()+1, splittedDateString[1]-1, splittedDateString[2]);
console.log("Start Date = "+stDate);
console.log("End Date = "+enDate);
$element.datepicker({
format: "yyyy/mm/dd",
todayHighlight: true,
startDate: stDate || new Date(),
endDate:enDate || new Date(),
autoclose: true
});

});
};

})


Each time I can see the
stDate
and
enDate
value changed but the 2nd datepicker start date and end date is not updating. I am stuck for 2 days. Please help

Answer Source

There are couple of changes needed.

 angular.module("myApp", []);
  angular
    .module("myApp")
    .directive('datePicker1', function() {
      return function(scope, element, attrs) {
        element.datepicker({
          format: "yyyy/mm/dd",
          todayHighlight: true,
          autoclose: true
        });
        scope.$evalAsync(function() {
          scope['productionDate'] = element.val();
        });
      };
    })
    .directive('datePicker2', function() {
      return {
        restrict: 'A',
        link: linker,
      }

      function linker(scope, $element, attrs) {
        // yyyy/mm/dd 2017/02/07
        var dateRegex = /^(\d{4})\/(\d{2})\/(\d{2})$/i,
          matchArr;
        var oneYearFromNow = null;
        $element.datepicker({
          format: "yyyy/mm/dd",
          todayHighlight: true,
          autoclose: true
        });
        scope.$watch('productionDate', function(newVal, oldVal) {
          if (newVal) {
            matchArr = newVal.match(dateRegex);
            // (parseInt(newVal.split("/")[0], 10) + 1) + newVal.slice(4);
            oneYearFromNow = (parseInt(matchArr[1], 10) + 1) + newVal.slice(4);
            $element.datepicker('setStartDate', newVal);
            $element.datepicker('setEndDate', oneYearFromNow);
            $element.datepicker('update');
          }
        });
      };
    });

It is working. Have a look at fiddle


I'll update my answer with code explanation

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download