无法更改另一个日期选择器中的日期选择器参数吗? [英] 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 case the min and max date update only once, when I select date in first datepicker for the first time. But if I change the selection, the second datepicker not revised with the changed value.

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天.请帮助

Each time I can see the stDate and enDate value changed but the 2nd datepicker start date and end date is not updating. I am stuck for 2 days. Please help

推荐答案

需要进行一些更改.

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

正在工作.看看小提琴

我将用代码说明更新答案

I'll update my answer with code explanation

这篇关于无法更改另一个日期选择器中的日期选择器参数吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！