javascript - angular bootstrap datepicker get visible dates (day mode)

Question

I need to get visible dates from the Datepicker if mode is day.

Example:

In this case I need to get these 42 days. Also if user change month, I should refresh the Datepicker controller view and get new 42 days.

Answer 1

So i managed to fix this. We need to extend uibDatepickerDirective

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


        angular.extend(directive.scope, {
            visibleDates: '=?'
        });


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

                var datepickerCtrl = ctrls[0];

                datepickerCtrl.getVisibleDates = function () {
                    var year = this.activeDate.getFullYear(),
                     month = this.activeDate.getMonth(),
                     firstDayOfMonth = new Date(this.activeDate);

                    firstDayOfMonth.setFullYear(year, month, 1);

                    var difference = this.startingDay - firstDayOfMonth.getDay(),
                        numDisplayedFromPreviousMonth = difference > 0 ?
                        7 - difference : -difference,
                        firstDate = new Date(firstDayOfMonth);

                    if (numDisplayedFromPreviousMonth > 0) {
                        firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
                    }
                    return this.getDates(firstDate, 42);;
                }

                var firstTime = true;

                $timeout(function () {
                    scope.$watch("activeDt", function () {
                        var newValues = datepickerCtrl.getVisibleDates();
                        if (firstTime) {
                            scope.visibleDates = newValues;
                            firstTime = false;
                            return;
                        }
                        if (newValues[0].getYear() !== scope.visibleDates[0].getYear() ||
                            newValues[0].getMonth() !== scope.visibleDates[0].getMonth() ||
                            newValues[0].getDate() !== scope.visibleDates[0].getDate()) {
                            scope.visibleDates = newValues;
                        }
                    });
                });


            }
        };
        return $delegate;
    });
});

And in directive itself we need to pass atribute visible-dates and point to the variable where we want to save these 42 days.

<span  uib-datepicker visible-dates="visibleDates" datepicker- ng-model="datePicked"></span>

This way we will update visibleDates (42 of them) if we change month in datepicker, but if we change activeDate (scope.activeDt) on the same month (same visible dates), it will stay unchanged.