Angular Bootstrap datepicker custom class

Question

I'm using Angular with UI Bootstrap Datepicker (https://angular-ui.github.io/bootstrap/) and I'm trying to update the day class to show there is something happening on that specific day using the existing customClass. This works fine when the dates passed are sync but not async using a $resource.

HTML

<uib-datepicker custom-class="getDayClass(date, mode)" ng-model="dt" min-date="minDate" show-weeks="false" starting-day="1" class="well well-sm" ng-change="selectDateChange()"></uib-datepicker>

JS

$scope.getDayClass = function (date, mode) {

    if ($scope.myCalendarEvents.length > 0) {

        if (mode === 'day') {

            var dayToCheck = new Date(date).setHours(0, 0, 0, 0);

            for (var i = 0; i < $scope.myCalendarEvents.length; i++) {

            var currentDay = new Date($scope.myCalendarEvents[i].startDate).setHours(0, 0, 0, 0);

            if (dayToCheck === currentDay) {

                return "full";

            }
        }

    }

    return '';
}               

};

See example where the async call is made (ps. this is not my Plnkr):

http://plnkr.co/edit/h8PxWfxSEtZuVCct00mD?p=preview

user6200762 · Accepted Answer · 2016-04-13 19:54:56Z

4

I had the same problem, to fix it I put an ng-if="variable" in element which contains the uib-datepicker.

"variable" should be myCalendarEvents, and when the uib-datepicker is displayed the data is available

answered Apr 13, 2016 at 19:54

user6200762

412 bronze badges

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

1 Comment

samurai_jane Over a year ago

Could you post your code showing this in context? I am having the same issue.

Collectives™ on Stack Overflow

Angular Bootstrap datepicker custom class

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related