Angular material datepicker禁用特定日期

时间：2018-03-15 08:11:54

标签： angularjs datepicker angular-material 

<div ng-controller="AppCtrl" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp">


<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-date-filter="onlyWeekendsPredicate" md-current-view="year"></md-datepicker>
                       只有在给定范围内的周末才可以选择                                输入聚焦时打开日历                                          使用ngMessages                             输入的值不是日期！           这个日期是必需的！           日期太早了！           日期太晚了！           只允许周末！                                在md-input-container里面                    输入日期                                   输入的值不是日期！             这个日期是必需的！             日期太早了！             日期太晚了！                                    
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('AppCtrl', function($scope) {
$scope.myDate = new Date();

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

$scope.maxDate = new Date(
    $scope.myDate.getFullYear(),
    $scope.myDate.getMonth() + 2,
    $scope.myDate.getDate());
//if your dealing with day not formatted with some sort of timestamp
// you can use a function like this to format then filter accordingly
var daysAvailableThisMonth = [1, 15,22, 30];

function formattedDate(day) {

    var currentYr = new Date().getFullYear();
    return { day: new Date(currentYr, day), booked: false };
}

function getDaysInMonth(year,month) {
    var date = new Date(year,month,1);
    var days = [];
    while (date.getMonth() === month) {
        //you can set the default flag as you like but itll help filtering.
        days.push({
            day: new Date(date),
            booked: true
        });
        date.setDate(date.getDate() + 1);
    }
    return days;
  console.log(days);
}
var currentMonthDayArray = getDaysInMonth(2018,2);

daysAvailableThisMonth.forEach(function(day, index) {
    daysAvailableThisMonth[index] = formattedDate(day);
});

currentMonthDayArray.forEach(function(booking) {
    daysAvailableThisMonth.forEach(function(date) {
        if (date.day.getTime() == booking.day.getTime()) {
            booking.booked = false;
        }
    })
});

$scope.onlyWeekendsPredicate = function(date) {
    for(var i = 0; i < currentMonthDayArray.length; i++){
        if(currentMonthDayArray[i].day.getTime() === date.getTime() && currentMonthDayArray[i].booked === false) {
            return true;
        }
    }
};

}）;

/ ** 版权所有2016 Google Inc.保留所有权利。 此源代码的使用受MIT样式许可的约束，该许可可在https://material.angularjs.org/HEAD/license的LICENSE文件中找到。 ** / 

  </div>

  <div flex-gt-xs="">
    <h4>Opening the calendar when the input is focused</h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-open-on-focus=""></md-datepicker>
  </div>
</div>

<div layout-gt-xs="row">
  <form name="myForm" flex-gt-xs="">
    <h4>With ngMessages</h4>
    <md-datepicker name="dateField" ng-model="myDate" md-placeholder="Enter date" required="" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"></md-datepicker>

    <div class="validation-messages" ng-messages="myForm.dateField.$error">
      <div ng-message="valid">The entered value is not a date!</div>
      <div ng-message="required">This date is required!</div>
      <div ng-message="mindate">Date is too early!</div>
      <div ng-message="maxdate">Date is too late!</div>
      <div ng-message="filtered">Only weekends are allowed!</div>
    </div>
  </form>

  <form name="myOtherForm" flex-gt-xs="">
    <h4>Inside a md-input-container</h4>

    <md-input-container>
      <label>Enter date</label>
      <md-datepicker ng-model="myDate" name="dateField" md-min-date="minDate" md-max-date="maxDate"></md-datepicker>

      <div ng-messages="myOtherForm.dateField.$error">
        <div ng-message="valid">The entered value is not a date!</div>
        <div ng-message="required">This date is required!</div>
        <div ng-message="mindate">Date is too early!</div>
        <div ng-message="maxdate">Date is too late!</div>
      </div>
    </md-input-container>
  </form>
</div>

2 个答案:

答案 0 :(得分：0)

我们可以使用md-date-filter并实现此目标

这是工作代码

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.7/angular-material.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.min.js"></script>
  <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.7/angular-material.js"></script>
  <!-- Angular Material Library -->

  <script>
    (function() {
      angular.module('MyApp', ['ngMaterial']).controller('AppCtrl', function() {
        var vm = this;
        vm.myDate = new Date();
        vm.dateRangeToDisable = [new Date("2018-03-14"), new Date("2018-03-13"), new Date("2018-03-12"), new Date("2018-03-11")];

        function formatDate(date) {
          var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();

          if (month.length < 2) month = '0' + month;
          if (day.length < 2) day = '0' + day;

          return [year, month, day].join('-');
        }

        vm.onlyWeekendsPredicate = function(date) {
          var showDate = true;
          angular.forEach(vm.dateRangeToDisable, function(item) {
            if (formatDate(item) === formatDate(date)) {
              showDate = false;
            }
          });
          return showDate;
        };
      });
    }());
  </script>
</head>

<body ng-app="MyApp">
  <div ng-controller="AppCtrl">
    <md-content ng-controller="AppCtrl as ctrl" layout-padding="" ng-cloak="" class="datepickerdemoValidations" ng-app="MyApp">
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-date-filter="ctrl.onlyWeekendsPredicate"></md-datepicker>
    </md-content>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我发现了如何通过试图在stackoverflow中找到一些早期帖子来禁用它们。

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('AppCtrl', function($scope) {
  $scope.myDate = new Date();

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

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

  var daysAvailableThisMonth = [1, 10,14,15, 31];

  $scope.onlyWeekendsPredicate = function(date) {
    var day = date.getDate();
    return daysAvailableThisMonth.indexOf(day) > -1;
  };
});



/**
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
**/



<div ng-controller="AppCtrl" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp">
  <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 flex-gt-xs="">
        <h4>Opening the calendar when the input is focused</h4>
        <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-open-on-focus=""></md-datepicker>
      </div>
    </div>

    <div layout-gt-xs="row">
      <form name="myForm" flex-gt-xs="">
        <h4>With ngMessages</h4>
        <md-datepicker name="dateField" ng-model="myDate" md-placeholder="Enter date" required="" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"></md-datepicker>

        <div class="validation-messages" ng-messages="myForm.dateField.$error">
          <div ng-message="valid">The entered value is not a date!</div>
          <div ng-message="required">This date is required!</div>
          <div ng-message="mindate">Date is too early!</div>
          <div ng-message="maxdate">Date is too late!</div>
          <div ng-message="filtered">Only weekends are allowed!</div>
        </div>
      </form>

      <form name="myOtherForm" flex-gt-xs="">
        <h4>Inside a md-input-container</h4>

        <md-input-container>
          <label>Enter date</label>
          <md-datepicker ng-model="myDate" name="dateField" md-min-date="minDate" md-max-date="maxDate"></md-datepicker>

          <div ng-messages="myOtherForm.dateField.$error">
            <div ng-message="valid">The entered value is not a date!</div>
            <div ng-message="required">This date is required!</div>
            <div ng-message="mindate">Date is too early!</div>
            <div ng-message="maxdate">Date is too late!</div>
          </div>
        </md-input-container>
      </form>
    </div>

  </md-content>
</div>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
-->

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.7/angular-material.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.min.js"></script>
  <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.7/angular-material.js"></script>
  <!-- Angular Material Library -->

  <script>
    (function() {
      angular.module('MyApp', ['ngMaterial']).controller('AppCtrl', function() {
        var vm = this;
        vm.myDate = new Date();
        vm.dateRangeToDisable = [new Date("2018-03-14")];


        vm.onlyWeekendsPredicate = function(date) {
          var disableDate = false;

          angular.forEach(vm.dateRangeToDisable, function(item, index) {
            if (item.toDateString() !== date.toDateString()) {
              disableDate = true;
            }
          });
          return disableDate;
        };
      });
    }());
  </script>
</head>

<body ng-app="MyApp">
  <div ng-controller="AppCtrl">
    <md-content ng-controller="AppCtrl as ctrl" layout-padding="" ng-cloak="" class="datepickerdemoValidations" ng-app="MyApp">
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-date-filter="ctrl.onlyWeekendsPredicate"></md-datepicker>
    </md-content>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题