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

cloudnat · Accepted Answer · 2016-08-01 16:05:38Z

0

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

edited Aug 1, 2016 at 16:05

answered Aug 1, 2016 at 13:54

cloudnat

715 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bill_Data23 Over a year ago

thanks for the answer but what would be the 'days' value?, also the date I want to check it's going to be always the current day I don't know why should I need to check it with the moment() date and if the current date is lesser than the moment day I'm adding 4 days? and that "date" variable it's the same that the "date.getDay()" variable thanks in advance

Bill_Data23 Over a year ago

I edited my question @Natraj, now all my dates in the date picker are disabled why?

cloudnat Over a year ago

Also, seems you didn't use the code I've given you, you are comparing today with today itself and the loop goes on, that's the reason all the dates are disabled...

cloudnat Over a year ago

I believe the above code should work as expected if you pass the right date. With your example, if you pass date value is August 1 or 2 or 3 or 4, it will return false and for the rest of the week days it will return true.. Let me know if that doesn't work

Bill_Data23 Over a year ago

ok thanks friend I would try and edit my question with the outcome

Collectives™ on Stack Overflow

How to disable specific dates in angular material datepicker

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related