Angular Material datepicker filter specific date

Question

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 can get it to work for the specific day of that week, yet it causes every week of the same day to be filtered. All the documentation appears to highlight this as a necessary feature for allowing/not allowing a user to select a specific date using the datepicker.

Answer 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.
    -->