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 ?

Hello! did you find anything about disable specifics dates dynamically (like if you have a list of activities, you choose another activity then you disable certain day on the calendar cause this activity has nothing these days)? thank you! — KeizerBridge
– KeizerBridge, Commented Feb 8, 2016 at 17:16

Farhan Khan · Accepted Answer · 2014-04-03 20:56:52Z

16

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

edited Apr 3, 2014 at 20:56

answered Apr 3, 2014 at 18:37

Farhan Khan

5905 silver badges6 bronze badges

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

1 Comment

Silvio Troia Over a year ago

could I disabled only few dates based on selection?

LeOn - Han Li · Accepted Answer · 2016-09-12 21:00:27Z

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.

Collectives™ on Stack Overflow

Disable specific dates in Angularjs date picker

2 Answers 2

References:

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

References:

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related