CODEWITHSUNDEEP
angularjsangular-ui-bootstrapbootstrap-datepicker
Tim1979
Tim1979

Reputation: 51

Angular Bootstrap datepicker custom class

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

Upvotes: 5

Views: 5518

Answers (1)

user6200762
user6200762

Reputation: 41

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

Upvotes: 4

Related Questions