Cannot disable DatePicker or TimePicker

[functionportal]

There does not seem to be a way to disable the DatePicker or TimePicker controls. ng-disable does not seem to be supported.

[bekos]

You can disable the input for the popup datepicker but I suppose you talk about the inline datepicker & timepicker.
I have never thought of that! :-)

Why don't you just hide them?

[functionportal]

Hiding and disabling are two different things. I want to see the set value, but prevent the user from changing that value.

[bekos]

I know the difference. I was saying that you can just show the value as string in a disabled input or a fancy container and do not show or remove the datepicker control at all. This way you will avoid all the extra elements and watchers that these controls add in your application.

Anyway, if you are willing to submit a PR for this then we would be happy to review, but adding all these ng-disabled to every button the datepicker and timepicker may have, it is not something I am not very keen on doing. Probably you can create a directive that adds a mask above it, and you can use it more generally in your app.
I am not sure what is the best solution, if you insist on showing the control, but if come up with something cleverer than than we can discuss.

Leaving open for now in case someone else wants to participate and share thoughts :-)

[functionportal]

The DatePicker and TimePickers may become enabled and disabled at runtime. Swapping to something that looks different between enabled and disabled controls makes the presentation jumpy and confusing. Imagine a checkbox that enables/disables a form section that contains a DatePicker or TimePicker. You would want a consistent layout and look regardless of the control being enabled and disabled. With the DatePicker. I can see the difficulty of disabling the inline calendar, and as a workaround, I can substitute the disabled popout input. However, TimePicker should be easy to disable since it only has 5 buttons and 2 fields.

[bekos]

Closing because adding all this extra template watchers for the datepikcer & timepicker is going to highly affect their performance.

Timepicker does not have (yet) a popup control so there is no way to use the same workaround as you describe for the datepicker. For your situation I would suggest an overlay div with some opacity to indicate the disabled state.

[pscanlon1]

Its an input field, it should inherit the ability to be disabled... Why can't you bind the event that pops open the control to ng-enabled???

[jaspervanveghel]

One way to do it would be to set date-disabled to "'true'" (all dates unclickable) and show-button-bar to "'false'" (buttons not visible).

<label>Date</label>
<p class="input-group">
    <input type="text" class="form-control" ng-model="dt"
       datepicker-popup="MM-dd-yyyy" is-open="opened" close-text="Close"
       show-weeks="true" show-button-bar="'false'" date-disabled="'true'" disabled />
    <span class="input-group-btn">
        <button class="btn btn-disabled" ng-click="open()">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</p>

[ttsanev]

You can also extend the directive:

angular.module('ui.bootstrap.datepicker')
    .config(function($provide) {
        $provide.decorator('datepickerDirective', function($delegate) {
            var directive = $delegate[0];

            directive.scope.disabled = '=';
            directive.compile = function() {
                return function(scope, element, attrs, ctrls) {
                    directive.link.apply(this, arguments);
                    var controller = ctrls[0];
                    var originalDisabled = controller.isDisabled;
                    controller.isDisabled = function () {
                        return scope.disabled || (originalDisabled && originalDisabled.apply(this, arguments));
                    };
                    scope.$watch('disabled', function () {
                      controller.refreshView();
                    });
                }
            };
            return $delegate;
        });
    });

[AliAdravi]

I use ngDisabled attribute in my directive to disable the calendar and it is working smooth
See this with demo at
http://www.advancesharp.com/blog/1224/angularjs-jquery-ui-datepicker-for-any-condition