Disable specific dates in Angularjs date picker

Question

I want to disable specific dates in the date picker of AngularJS.

I am using AngularJS-bootstrap css for components.

The dates which I want to disable will be changing dynamically based on the selection of previous value in combo.

I believe date-disabled="disabled(date, mode)" should work, though not sure.

How can i do this ?

Answer 1

I'm assuming you are using the Datepicker directive from Angular-UI. The date-disabled attribute lets you disable certain dates (weekends for example). See this plunk http://plnkr.co/edit/gGAU0L?p=preview

If you want to dynamically disable dates based on selection, you can use the min and max attributes and watchers. See http://plnkr.co/edit/W5pb1boMLOHZFnWkMU8o?p=preview

References:

http://angular-ui.github.io/bootstrap/#/datepicker

Answer 2

Note, as of now, in the newer version(from 1.1.0) onward of AngularUI Bootstrap, you have to use datepicker-options attribute to do the date disable as well as things like max/min date.

in the html control, add

datepicker-options="vm.dateOptions"

or datepicker-options="dateOptions" if you are not using controller as but $scope directly.

Then in your controller, define the dateOptions object.

    vm.dateOptions = {
        maxDate: new Date(),
        dateDisabled: myDisabledDates
    };  

    function myDisabledDates(dateAndMode) {
        return ( dateAndMode.mode === 'day' && ( dateAndMode.date.getDay() === 0 || dateAndMode.date.getDay() === 6 ) );
    }

!!!Notice!!! the function signature of the dateDisabled changed. Previously it accept a date object and a mode string. In the newer version, it is a wrapped object containing both.