不能在另一个日期选择器中更改日期选择器参数？

Posted 2023-02-23

【中文标题】不能在另一个日期选择器中更改日期选择器参数？

【英文标题】：Can not change datepicker parameter on change in another datepicker?

【发布时间】：2017-06-24 18:58:00

【问题描述】：

我在一个表单中有两个日期选择器。当用户选择第一个日期时，应更新第二个日期选择器的最小和最大日期（选择后一年）。但在我的情况下，当我第一次在第一个日期选择器中选择日期时，最小和最大日期只更新一次。但是如果我更改选择，第二个日期选择器不会使用更改后的值进行修改。

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天。请帮忙

【问题讨论】：

嗨，你用哪个脚本来渲染你的日期选择器？

你介意提供一个小提琴吗？

将$element.datepicker... 包裹在$scope.$evalAsync(function() //date picker ); 中

@GangadharJannu 我已经尝试过了，但仍然没有更新。

@sankycse 你能提供一个你的代码的小提琴，它会有很大帮助。

【参考方案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 = /^(\d4)\/(\d2)\/(\d2)$/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

---

我会用代码解释更新我的答案

【讨论】：

哇！这绝对很棒。请提供一些解释，我是角度新手。非常感谢。