0

I need to disable all dates which are not from the currently focused month. Tried using date-disabled attribute based on selected date, but it forever disables dates. The dates remain disabled when month is changed.

I thought of an alternative solution : All dates not from currently focused month have a class "text-muted" applied to them. Tried to create the below directive which checked the class and disabled dates. But this is not working at all. Can anyone take a look?

HTML:

<datepicker ng-model="dt" show-weeks="false" disable-muted-dates />

Javascript:

    angular.module('app', ['ui.bootstrap'])
    .directive('disableMutedDates',[function () {
        return {
            link:function (scope,element) {
                var datepicker = element;
                var table = angular.element(datepicker.children()[0]);
                var tbody = angular.element(table.children()[1]);
                var trs = angular.element(tbody.children());
                for (var i = trs.length - 1; i >= 0; i--) {
                    var tr = angular.element(trs[i]);
                    var tds = angular.element(tr.children());
                    for (var j = tds.length - 1; j >= 0; j--) {
                        var td = angular.element(tds[j]);
                        if (angular.element(td.children()[0]).prop('tagName') === 'BUTTON') {
                            var button = angular.element(td.children()[0]);
                            var span = angular.element(button.children()[0]);
                            if (span.hasClass('text-muted')) {
                                button.attr('disabled',true);
                            };
                        };
                    };
                };
            }
        }
    }])

PEN : http://codepen.io/cyrilpanicker/pen/qdpPjY?editors=101

Cyril
  • 167
  • 1
  • 4
  • 11
  • What's the desired goal? – Kirill Slatin Jun 28 '15 at 16:20
  • Desired goal is to disable all dates not in the currently focused month. – Cyril Jun 28 '15 at 16:28
  • This exactly as in the question :) I mean, default behavior for dates not is selected month is switch to the month they belong to. You want to disable switching between months this way? – Kirill Slatin Jun 28 '15 at 16:53
  • No Kirill, I do not want to disable switching between months. When the month is changed, I want only dates from 'that' month to be available for selection. For selecting dates from a different month, I want to force user to change the month first. – Cyril Jun 28 '15 at 17:00
  • hmm... I open your working example on codepen, it shows a picker with June opened. If I click any date in May in this view it changes to May and I can select one of the dates of May, If click July date (I see 11 of them) I'm switched to July with same effect. What's wrong? – Kirill Slatin Jun 29 '15 at 01:10
  • Kirill, it is a requirement that dates from May or July should not appear in calendar for June. If user needs to select a date from May or July, user first needs to change month and then select date. I know its weird, but that is the requirement. – Cyril Jun 29 '15 at 09:13
  • Then you're using wrong terminology. You wonna hide dates, not disable. This is a duplicate of this http://stackoverflow.com/q/22544118/4573999 – Kirill Slatin Jun 29 '15 at 10:12

0 Answers0