无法更改另一个日期选择器中的日期选择器参数? [英] Can not change datepicker parameter on change in another datepicker?

问题描述

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

html:

<label>模型生产日期</label><input date-picker1 type="text" class="form-control" placeholder="生产日期" ng-model="productionDate">
<div class="form-group"><label>下次审核日期</label><input date-picker2 type="text" class="form-control" placeholder="下一次审核日期" ng-model="nextReviewDate">

JS:

.directive('datePicker1', function () {返回函数(范围、元素、属性){element.datepicker({格式:"yyyy/mm/dd",今日亮点:真实，//开始日期:stDate ||新日期()，//结束日期:结束日期 ||新日期()，自动关闭:真});scope.$watch('productionDate', function (newVal, oldVal) {如果(新值){范围['生产日期'] = newVal;}别的{返回;}});};}).directive('datePicker2', function () {返回 {限制:'A'，链接:链接器，}函数链接器(作用域，$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("开始日期 = "+stDate);console.log("结束日期 = "+enDate);$element.datepicker({格式:"yyyy/mm/dd",今日亮点:真实，开始日期:stDate ||新日期()，结束日期:结束日期 ||新日期()，自动关闭:真});});};})

每次我都能看到 stDate 和 enDate 值发生变化，但第二个日期选择器的开始日期和结束日期没有更新.我被困了2天.请帮忙

解决方案

需要进行一些更改.

 angular.module("myApp", []);有角的.module("myApp").directive('datePicker1', function() {返回函数(范围，元素，属性){element.datepicker({格式:"yyyy/mm/dd",今日亮点:真实，自动关闭:真});scope.$evalAsync(function() {scope['productionDate'] = element.val();});};}).directive('datePicker2', function() {返回 {限制:'A'，链接:链接器，}函数链接器(范围，$element，attrs){//yyyy/mm/dd 2017/02/07var dateRegex =/^(\d{4})\/(\d{2})\/(\d{2})$/i,matchArr;var oneYearFromNow = null;$element.datepicker({格式:"yyyy/mm/dd",今日亮点:真实，自动关闭:真});scope.$watch('productionDate', function(newVal, oldVal) {如果(新值){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('更新');}});};});

它正在工作.看看 fiddle

<小时>

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

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

    });         
};

})

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

解决方案

There are couple of changes needed.

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

It is working. Have a look at fiddle

---

I'll update my answer with code explanation

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