Disable Angular ui.bootstrap.datepicker

angularjs datepicker angular-bootstrap
user2964500 picture user2964500 · Jul 2, 2014 · Viewed 15.1k times · Source

I'm using the datepicker in the Angular bootstrap collection. (http://angular-ui.github.io/bootstrap/).

I know that you can disable individual dates in the datepicker, but I need to disable the whole datepicker, as shown in this blog post (which uses jQuery).

How would you disable the whole datepicker using Angular?

Answer

Fedor Skrynnikov picture Fedor Skrynnikov · Jul 2, 2014

It seems there is no way of doing this directly. But there are some workarounds which were discussed in https://github.com/angular-ui/bootstrap/issues/1113

Instead you can make a scope variable that will indicate if datepicker is disabled and if yes, then hide datepiker at all and show the model of datepicker in a fancy container.

Other way is to set date-disabled to true, disable input and set show-button-bar to false.

But again...those are workarounds ... you may try to make them look prettier by wraping to the custom directive like datepicker-disable if you want. Or wrap jquery datepicker you like into angular directive, which will be a bit more work.

Related questions

How to replace deprecated uib-datepicker-popup?

Since I updated my project to "angular-bootstrap": "~1.2.4", I've a warning in the console: uib-datepicker settings via uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead uib-datepicker-popup is filled by a date format or an …

Read More
Angular bootstrap datepicker date format does not format ng-model value

I am using bootstrap date-picker in my angular application. However when I select a date from that date-picker underlying ng-model that I have bind gets updated I want that ng-model in one date format 'MM/dd/yyyy'. but it every …

Read More
how to bind Bootstrap-datepicker element with angularjs ng-model?

Here is the html for the date field : <div class='form-group'> <label>Check out</label> <input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" placeholder="Check out" required id="check-out"> </div&…

Read More