Question

我正在尝试停用日历中的特定日期，因此用户无法选择相关日期 - 请参阅https://plnkr.co/edit/PwCLKWPQU0s3habxgUly?p=preview。

这里唯一的问题是我只能在将值返回到过滤器时禁用一个日期，而在这种情况下，我想要禁用两个示例日期。我还可以在return语句中对这两个日期进行硬编码，但对于我的实际项目，禁用日期的数组是未知的。

这是JS：

var bookedDates = [new Date(2016, 10, 25).toString(), new Date(2016, 10, 10).toString()];

$scope.onlyWeekendsPredicate = function (date) {
    var day = date.getDate();
    var month = date.getMonth();
    var year = date.getFullYear();
    var todaysDate = new Date (year, month, day).toString();

    var confirmedBookingDates = [];

    for (var n = 0; n <= bookedDates.length; n++) {
        if (todaysDate != bookedDates[n]) {
            confirmedBookingDates[n] = true;
        }
        return confirmedBookingDates[n];
    }

};

Answer 1

如果你有预订日期，就像你上面的数据库一样，你可以使用$ filter来处理预订。 Codepen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
  <style type="text/css">
    .datepickerdemo md-content {
      padding-bottom: 200px;
    }
    .datepickerdemo .validation-messages {
      font-size: 11px;
      color: darkred;
      margin: 10px 0 0 25px;
    }
  </style>
</head>

<body data-ng-app="MyApp">
  <div data-ng-controller="AppCtrl" ng-cloak="" class="datepickerdemoBasicUsage">
    <md-content layout-padding="">
      <div layout-gt-xs="row">
        <div flex-gt-xs="">
          <h4>Only weekends within given range are selectable</h4>
          <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"></md-datepicker>
        </div>
      </div>
    </md-content>
  </div>
  <script type="text/javascript">
    function filterBookings() {
      return function(date, bookedDates) {
        for (var i = 0; i < bookedDates.length; i++) {
          return date.toString() !== bookedDates[i];
        }
      };
    }

    angular
      .module('MyApp', ['ngMaterial', 'ngMessages'])
      .controller('AppCtrl', function($scope, $filter) {

        var bookedDates = [new Date(2016, 10, 25).toString(), new Date(2016, 10, 10).toString()];

        $scope.onlyWeekendsPredicate = function(date) {
          return $filter('filterBookings')(date, bookedDates);

        };

      })
      .filter('filterBookings', filterBookings);
  </script>
</body>

</html>

//Update, insert new predicate func.
$scope.onlyWeekendsPredicate = function(date) {
  return bookedDates.indexOf(date.toString()) === -1;
};

Answer 2

它的工作原理，你可以使用php变量动态禁用日期，你可以从数据库绑定这个值来获得动态输出。

对于停用日期，请使用!==符号

只需复制粘贴以下代码并结帐

即可

    <html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="datepickerValidations" ng-cloak>
  <!--
    Your HTML content here
  -->  
 <md-content ng-controller="AppCtrl as ctrl" layout-padding ng-cloak>


  <div layout-gt-xs="row">
    <div flex-gt-xs>
      <h4>Disable specific date</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"
          md-min-date="ctrl.minDate" md-max-date="ctrl.maxDate"
          md-date-filter="ctrl.disableSpecificDate"></md-datepicker>
    </div>


  </div>
</md-content>

  <!-- Angular Material requires Angular.js Libraries -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    angular.module('datepickerValidations', ['ngMaterial', 'ngMessages']).controller('AppCtrl', function() {
  this.myDate = new Date();

  this.minDate = new Date(
    this.myDate.getFullYear(),
    this.myDate.getMonth() - 2,
    this.myDate.getDate()
  );

  this.maxDate = new Date(
    this.myDate.getFullYear(),
    this.myDate.getMonth() + 2,
    this.myDate.getDate()
  );

  this.disableSpecificDate = function(date) {
    var date= date.getDate()/date.getMonth()/date.getFullYear();
    return date !== 20/6/2017 && date !== 21/6/2017;
  };
});
  </script>

</body>
</html>

Answer 3

两天+周末为alphagrim：

function filterBookings() {
return function(date, bookedDates) {
    var day = date.getDay();
    if(day === 1 || day === 2 || day === 3 || day === 4 || day === 5){
        var sw = 0;
          for(var i =0; i < (bookedDates.length); i++) {
              if(date.toString().trim() === bookedDates[i].toString().trim()){
                sw = 1;
              }
          }
        if(sw==0){
          return date.toString();
        }
    }
};

使用Angular Material中的datepicker禁用特定日期

3 个答案: