Richard Ansell Richard Ansell - 1 year ago 92
AngularJS Question

Disable specific dates using datepicker in Angular Material

I'm trying to disable specific dates in a calendar so a user can't select the dates in question - please see

The only issue here is that I can only disable one date when returning the value to the filter, whereas in this case there are two example dates I was wanting to disable. I can also hard-code the two dates in the return statement, yet for my actual project the array of disabled dates is unknown.

Here is the 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 Source

If you have the bookedDates let say from a DB returned into array like you do above you can use a $filter to handle bookings. Codepen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html lang="en">

  <meta charset="UTF-8">
  <link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
  <style type="text/css">
    .datepickerdemo md-content {
      padding-bottom: 200px;
    .datepickerdemo .validation-messages {
      font-size: 11px;
      color: darkred;
      margin: 10px 0 0 25px;

<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>
  <script type="text/javascript">
    function filterBookings() {
      return function(date, bookedDates) {
        for (var i = 0; i < bookedDates.length; i++) {
          return date.toString() !== bookedDates[i];

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


//Update, insert new predicate func.
$scope.onlyWeekendsPredicate = function(date) {
  return bookedDates.indexOf(date.toString()) === -1;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download