Angular Material Datepicker Filter Specific Date

Can someone please explain how to apply a custom date as a filter using Angular Material without causing everyweek on that day to be selectable? I've followed the documentation and

Solution 1:

Please see below code. Basically, all I did was make an array of date's we'd like to allow. Then just used index of to check if the day was allowed. Additionally, you could write a function get current days in month and if user selects day then pop that day out of the currentDaysInMonth array. Here's my codepen. Hope it helps, I can update as needed.

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, 30];

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

  function getDaysInMonth(month, year) {
    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;
  }
  var currentMonthDayArray = getDaysInMonth(new Date().getMonth(), new Date().getFullYear());

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

/**
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.
    -->