How to disable specific dates in angular material datepicker

Question

How can I disable specific dates based on the current date, let's say that today is 8/1/16, I want to disable 4 days (4 it's an example it could be any number) after the current date weekends days doesn't count,

Example if today is 8/1/16 I want to disable 8/2/16 , 8/3/16, 8/4/16 and 8/5/16, and the dates that would be available would be the ones that are after 8/8/16.

At the moment I only know how to disable all the weekend days in the calendar with this filter

$scope.disableSelectedDays = function () {

                //I create a New moment since I always going to need the current date
                var momentJS = new moment();

                if (momentJS <= moment().add(4, 'days')) {
                    return false;
                } else {
                    //Just disable the weekends
                    var day = date.getDay();
                    return day === 1 || day === 2 || day === 3 || day === 4 || day === 5;
                }
            }

this is my html

<div class="form-group">
                                <label>Delivery date:</label>
                                <md-datepicker ng-model="myDate" md-placeholder="Enter date"
                                               md-date-filter="disableSelectedDays">
                                </md-datepicker>
                            </div>

this are the versions that I'm using angular-maeria: v1.1.0-rc.5 datepicker: datepicker from angular material v1.1.0-rc4-master-88f2e3f

EDIT 1

I edited my code with your answer but now all the days in the datepicker are disabled I can't select anything, what I'm doing wrong?

I added this libaries moment libraries

moment.js version : 2.14.1 angular-moment https://github.com/urish/angular-moment

Natraj Natraj · Accepted Answer · 2016-08-01T13:54:52

For this scenario, you can try using moment.js

To disable any number of days after the selected date, you can do this (Hopefully should work, have not tested, there might be typo's)

//date is the date you wanted to check

//NumberOfdays 4 as per your example

$scope.disableSelectedDays = function (date ) {
    if(date <= moment().add(4, 'days')) {
        return false;
    }
    else {
    //Just disable the weekends
            var day = date.getDay();
            return day === 1 || day === 2 || day ===3 || day === 4 || day === 5;
         }
  }

How to disable specific dates in angular material datepicker

1 Answers