Angular ui.bootstrap 日期选择器动态最小日期不工作

Question

我正在使用 Angular ui.bootstrap 日期选择器，我需要根据我选择的其他日期动态设置最短日期。下面我添加了我尝试过的代码。这里 'To' 我将首先选择日期。根据选择的 'To' 日期，我需要为 'From' 日期设置最短日期。 'From' 最短日期应比 'To' 日期中选择的日期早 30 天。

JS.

$scope.showButtonBar = false;
$scope.disabled = true;
$scope.today = function() {
  $scope.dt;
};
$scope.dtmax = new Date();
$scope.dateformat = "dd/MM/yyyy";
$scope.today();
$scope.showto = function($event) {
  $scope.showdpto = true;
};
$scope.showfrom = function($event) {
  $scope.showdpfrom = true;
};

$scope.setFrom = function(){
  $scope.disabled = false;
  $scope.dfmax = $scope.dt;
  $scope.dfMin = $scope.dt-30; // this is not working
  //$scope.dfMin = ($scope.dt.getDate() - 30); //this is also not working

  $scope.df = "";
  $scope.$apply();
}
$scope.Search = function(){
    console.log($scope.dt);
    console.log($scope.df);
    console.log($scope.dfMax);
  }

HTML

  From:
  <input type="text" uib-datepicker-popup="{{dateformat}}" showWeeks="false"
         show-button-bar="false" ng-model="df" is-open="showdpfrom"
         max-date="dfmax" min-date="dfMin"
         ng-style="disabled ? {'background-color':'#000'}:{'background-color':'fff'}"/>
  <span>
    <button type="button" ng-disabled="disabled" class="btn btn-default"
            ng-click="showfrom($event)">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
  </span>
  TO:
  <input type="text" uib-datepicker-popup="{{dateformat}}" showWeeks="false"
         show-button-bar="false" 
         ng-model="dt" is-open="showdpto" max-date="dtmax"
         ng-change="setFrom()"/>
  <span>
<button type="button" class="btn btn-default" ng-click="showto($event)">
       <i class="glyphicon glyphicon-calendar"></i>
</button>
<button class="btn-confirm" ng-click="Search()">SEARCH</button>
</span>

Answer 1

min-date 属性接受值作为日期对象，因此您需要按如下方式设置 dfMin 的值。

   $scope.dfMin = new Date($scope.dt);
   $scope.dfMin.setDate($scope.dt.getDate()-30);

$scope.dfMax 有效，因为 $scope.dt 已经是一个日期对象。

Angular ui.bootstrap 日期选择器动态最小日期不工作

Angular ui.bootstrap datepicker dynamic min-date not working

javascript

angularjs

angular-ui-bootstrap