2016-12-30 76 views
0

中的minDate我有这两个datepickers:第一次约会的第二

<div class="form-group" ng-controller="datepickerpopupCtrl"> 

      <label>Start date:</label> 
      <p class="input-group"> 
       <input ng-model="task.startdate" name="startdate" type="text" class="form-control" 
         uib-datepicker-popup="{{format}}" 
         datepicker-options="options" 
         is-open="opened" 
         ng-required="true" 
         close-text="Close" 
         alt-input-formats="altInputFormats" 
         show-button-bar="false" 
         placeholder="startdate" /> 
       <span class="input-group-btn"> 
         <button type="button" class="btn btn-default" ng-click="open()"><i 
           class="glyphicon glyphicon-calendar"></i></button> 
        </span> 
      </p> 
     </div> 
     <div class="form-group" ng-controller="datepickerpopupCtrl"> 

      <label>End date:</label> 
      <p class="input-group"> 
       <input ng-model="task.enddate" name="enddate" type="text" class="form-control" 
         uib-datepicker-popup="{{format}}" 
         datepicker-options="optionsEndDate" 
         is-open="opened" 
         ng-required="true" 
         close-text="Close" 
         alt-input-formats="altInputFormats" 
         show-button-bar="false" 
         placeholder="Date de fin" 

       /> 
       <span class="input-group-btn"> 
         <button type="button" class="btn btn-default" ng-click="open()"><i 
           class="glyphicon glyphicon-calendar"></i></button> 
        </span> 
      </p> 
     </div> 

我想enddate(第二日期选择器)由第一日起startdate限制。

现在我已经试过这样:

function datepickerpopupCtrl($scope) { 

    $scope.dt = new Date(); 
    $scope.open = open; 
    $scope.opened = false; 
    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
    $scope.format = $scope.formats[0]; 
    $scope.options = { 
     showWeeks: false, 
     minDate : new Date(), 
     startDate : new Date() 
    }; 
    $scope.optionsEndDate = { 
     showWeeks: false, 
     minDate : ($scope.task.startdate == undefined) ? new Date() : $scope.task.dateDebut, 
     startDate : new Date() 
    }; 
    function open() { 
     $scope.opened = true; 
    } 
} 

})

,但它不工作。

任何建议将appreciated.thanks

+0

plunkr/fiddle or codepen pls – Pavan

回答

1

你需要安装一个$watch。它不工作的原因是因为您在控制器初始化时为第二个日期选择器设置了minDate。最初,$scope.task.startdate未定义,所以minDate由于您的三元运算符而被分配为new Date()。故事结局。

不管你是如何改变的$scope.task.startdate价值,一切都太迟了,因为你已经设置minDatenew Date()和您所做$scope.task.startdate任何更改没有任何效果。

因此,要处理这一点的最好办法是初始设置minDatenew Date(),然后设置一个手表上$scope.task.startdate

$scope.optionsEndDate = { 
    showWeeks: false, 
    minDate : new Date(), 
    startDate : new Date() 
}; 

$scope.$watch('task.startdate', function(newValue) { 
    $scope.optionsEndDate.minDate = (newValue == undefined) ? new Date() : newValue; 
}); 

,或者任选,你可以只分配minDate$scope.task.startdate,如果你当它未定义不在乎:

$scope.optionsEndDate = { 
    showWeeks: false, 
    minDate : $scope.task.startdate, 
    startDate : new Date() 
}; 

顺便说一句,到底是什么?$scope.dateDebut我只在你的代码中出现过一次。这是一个错字吗?

相关问题