不能在另一個日期選擇器中更改datepicker參數？

Question

我有一個窗體內的兩個datepicker。當用戶選擇第一個日期時，第二個日期選擇器的最小和最大日期應該更新（從選擇起一年）。但在我的情況下，最初和最大日期只更新一次，當我第一次在第一個日期選擇器中選擇日期。但是如果我改變了選擇，第二個日期選擇器沒有用改變的值修改。

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

它正在工作。看看fiddle

---

我會更新我的代碼解釋