5

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?

4 Answers4

4

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.

Fedor Skrynnikov
  • 5,521
  • 4
  • 28
  • 32
2

If I understand what you are asking correctly, I had the same problem. This is what I did to disable and enable the entire datepicker in Angular. I know you already have your answer but I figured I would share anyways.

Here is my HTML/bootstrap (which I got from the website you added at the top http://angular-ui.github.io/bootstrap/ almost half way down the page): All I did was add ng-disabled="disabled" to the input and button tags. disable is just a $scope variable that gets set to true or false when some event happens in my app

<div class="col-md-6, nonFields" style="margin-top:6px;">
    <p class="input-group">
        <input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" is-open="opened1" ng-model="dtClosed" ng-required="true" close-text="Close" ng-disabled="disabled"/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event, 'opened1', 'opened2', 'opened3')" ng-disabled="disabled"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>
</div>

In my angular js code I set $scope.disabled to true at the top

$scope.disabled = true;

Then when the user clicks a button and with the correct input I pretty much set $scope.disabled to false

$scope.shortCodeClick = function(){
     $scope.disabled = false;
};

and the entire datepicker becomes enabled. With this you can obviously customize what you want to do with whatever event and flip the datepicker back and forth from enabled to disabled and back. Hope this helps.

Costas Vrahimis
  • 519
  • 1
  • 8
  • 17
0

See the code, it watch the ngDisabled attribute value, because the control can be disabled conditionally 

scope.$watch(attr.ngDisabled, function (newVal) {
  if(newVal === true)
    $(elm).datepicker("disable");
  else
    $(elm).datepicker("enable");
});

For complete article and demo see the link and many more like how to use start and end date validation

Ali Adravi
  • 21,707
  • 9
  • 87
  • 85
0

I found well working solution here: look at bradrisse comment

Using this CSS:

.disabled-picker { cursor: not-allowed; } .disabled-picker:before { content: "";
z-index: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.8); }

And the HTML:

<div ng-class="{'disabled-picker': anyBoolHere }">
<datetimepicker ng-model="data.date"></datetimepicker>

Does the trick.

Hasse
  • 227
  • 3
  • 7