Geek Answers Handbook

Disable specific dates in a time list in Angularjs

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

I am using AngularJS-bootstrap css for components.

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

I believe that date-disabled="disabled(date, mode)" should work, although I'm not sure.

How can i do this?

+7
javascript angularjs angular-ui-bootstrap
source share
2 answers

I assume that you are using the Datepicker directive from Angular -UI. The date-disabled attribute allows you to disable certain dates (for example, holidays). See This plunk http://plnkr.co/edit/gGAU0L?p=preview

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


References:

http://angular-ui.imtqy.com/bootstrap/#/datepicker

+16
source share

Please note that currently in the new version (starting from version 1.1.0) from AngularUI Bootstrap you should use the datepicker-options attribute to disable the date, 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 a dateOptions object.

  vm.dateOptions = { maxDate: new Date(), dateDisabled: myDisabledDates }; function myDisabledDates(dateAndMode) { return ( dateAndMode.mode === 'day' && ( dateAndMode.date.getDay() === 0 || dateAndMode.date.getDay() === 6 ) ); }

!!! Note!!! The signature function dateDisabled has changed. Previously, it takes a date object and a mode line. In a newer version, this is a wrapped object containing both.

+5
source share

More articles:


All Articles