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 c

Solution 1:

There are couple of changes needed.

 angular.module("myApp", []);
  angular
    .module("myApp")
    .directive('datePicker1', function() {
      returnfunction(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,
      }

      functionlinker(scope, $element, attrs) {
        // yyyy/mm/dd 2017/02/07var 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