How can I disable the Angular UI Datepicker buttons outside of the current month?

Question

I am using the Bootstrap UI Datepicker in Angular, and it is working OK. However, when i am in month view, the days outside the month have a CSS class on the span called text-muted which I have set to display:none.

This is all well and good - I cannot see the dates in other months now, which matches my design. But the enclosing buttons of these dates are still clickable, and there does not seem to be a class or hook of any kind to disable them. Any one solved this - I thought it would be a simple config on the Datepicker directive itself, but must be overlooking the answer?

So, if I am in May, I have turned off the dates for April and June, so you cannot see the dates, but the buttons are still clickable to go to those dates in the other months....

To clarify, if the current date is May, and I am looking at May in the view, I do not want to be able to see or click on dates in April or June. However, when I use the next month button, and am viewing the month of June, I do not want to be able to see dates in May or July.

To clarify, if the current date is May, and I am looking at May in the view, I do not want to be able to see or click on dates in April or June. However, when I use the next month button, and am viewing the month of June, I do not want to be able to see dates in May or July. — colincclark
– colincclark, Commented Sep 7, 2015 at 7:24

sheilak · Accepted Answer · 2015-09-07 08:50:24Z

2

Create a decorator that can access the activeDate property of the datepicker controller, which will tell you which month is being viewed. Then override the isDisabled function on the controller so that if you are on the day view, and the month is not the active month, the date is disabled.

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

        directive.compile = function() {
            return function(scope, element, attrs, ctrls) {
                link.apply(this, arguments);

                ctrls[0].isDisabled =  function(date) {
                    return (scope.datepickerMode === 'day'
                        && (date.getMonth() !== ctrls[0].activeDate.getMonth()
                            || date.getYear() !== ctrls[0].activeDate.getYear()));
                };
            }
        };
        return $delegate;
    }]);
});

fiddle

edited Sep 7, 2015 at 8:50

answered Sep 5, 2015 at 0:30

sheilak

5,8737 gold badges36 silver badges46 bronze badges

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

4 Comments

colincclark Over a year ago

This does not work as required. Your code only works for the CURRENT month. OK, it disables the dates outside of the current month, but I need the current month to be the one you are looking at, not just the month that it actually is. So if it is currently May, I do not want to see or be able to click the dates for April or June. But when I navigate to June using the next button in the month view, I do not want to be able to click on dates in May or July. Make sense?

sheilak Over a year ago

Gotcha. In this case you need to be able to access the activeDate property in the datepicker controller, which will require a decorator. Code updated

colincclark Over a year ago

Seems like overkill, but you are most definitely The Man. Accepted as the answer - it is now fully working and integrated into my codebase

Ross Gustafson Over a year ago

I tried to use this in angular 1.5.11 and I am finding that ctrls[0] is undefined and thus I cannot override the isDisabled function. Any suggestions?

Collectives™ on Stack Overflow

How can I disable the Angular UI Datepicker buttons outside of the current month?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related