別の日付ピッカーの変更時にdatepickerパラメータを変更できませんか？

Question

私はフォームの中に2つの日付ピッカーを持っています。ユーザーが最初の日付を選択すると、2番目の日付ピッカーの最小日付と最大日付を更新する必要があります（選択から1年間）。しかし、私のケースでは、最初と最後の日付は最初の日付ピッカーで日付を選択したときに一度しか更新されません。しかし、私が選択を変更すると、2番目の日付ピッカーは変更された値では修正されません。

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

    });   
}; 

}) 

私は変更stDateとenDate値を見ることができますが、第二日付ピッカーの開始日と終了日が更新されないされるたびに。私は2日間立ち往生しています。助けてください

Answer 1

いくつかの変更が必要です。

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

これは機能しています。私は、コードの説明