Question

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

＆＃13;

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

＆＃13;

/* Put your css in here */

.padTop {
  padding-top: 20px;
}

＆＃13;

<!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>

＆＃13;

已禁用第一个datepicker中的日期，该日期是在第二个datepicker中选择的。但是，如果我更改第二个日期选择器中的日期它不会被反映（即它不会在第一个datepicker中被禁用）。无论如何处理这种情况？

Answer 1

AFAIK没有干净的方法来执行此操作，但更改minDate属性时，datepicker会刷新。因此，如果您在控制器中添加它，它将起作用...

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

在datepicker

1 个答案: