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值已更改，但第二个datepicker开始日期和结束日期未更新。我被困了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

我将使用代码说明更新我的答案

在另一个datepicker中更改时无法更改datepicker参数？

1 个答案: