在日期选择器中动态禁用特定日期答案

【问题标题】：disable specific date dynamically in datepicker在日期选择器中动态禁用特定日期
【发布时间】：2016-05-29 18:44:49
【问题描述】：

使用 AngularJs，我想动态禁用 Datepicker 的特定日期。这是我所做的。

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $q) {



  $scope.date1 = new Date();
  $scope.date2 = new Date();
  $scope.date2.setDate($scope.date2.getDate() - 1);



  var currentDay = new Date();


  $scope.isDateDisabled = function(date, mode) {
    /*console.log("date=="+date.getTime());
    console.log("currentdate"+$scope.date2.getTime());*/
    if (date.getDate() === $scope.date2.getDate()) {
      return true;
    } else {
      return false;
    }

  };
});

/* Put your css in here */

.padTop {
  padding-top: 20px;
}

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div class="container padTop">


    <div>
      <div style="display:inline-block; min-height:290px;">
        <datepicker ng-model="date1" min-date="minDate" show-weeks="true" date-disabled="isDateDisabled(date,mode)" class="well well-sm"></datepicker>
      </div>
      <div style="display:inline-block; min-height:290px;">
        <datepicker ng-model="date2" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>
      </div>
    </div>



    <p class="padTop">date1:</p>
    <pre>
{{ date1 | date : 'dd/MM/yyyy'  }}

{{ date2 | date : 'dd/MM/yyyy'  }}
</pre>

  </div>


</body>

</html>

在第二个日期选择器中选择的第一个日期选择器中的日期被禁用。但是如果我在第二个日期选择器中更改日期它不会被反映（即它不会在第一个日期选择器中被禁用）。无论如何要处理这个案子？

【问题讨论】：

标签： angularjs angular-ui-bootstrap bootstrap-datepicker

【解决方案1】：

AFAIK 没有干净的方法可以做到这一点，但是当您更改 minDate 属性时，日期选择器会刷新。因此，如果您将其添加到控制器中，它将起作用...

  $scope.$watch("date2", function (newValue, oldValue) {
           $scope.minDate= new Date();
           $timeout(function () {
                $scope.minDate = null;
           }, 0);
});

【讨论】：