feat(datepicker): Add custom class to specific days via outside logic

Author: Urigo

src/datepicker/datepicker.js

@@ -93,14 +93,19 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
       label: dateFilter(date, format),
       selected: model && this.compare(date, model) === 0,
       disabled: this.isDisabled(date),
-      current: this.compare(date, new Date()) === 0
+      current: this.compare(date, new Date()) === 0,
+      customClass: this.customClass(date)
     };
   };
 
   this.isDisabled = function( date ) {
     return ((this.minDate && this.compare(date, this.minDate) < 0) || (this.maxDate && this.compare(date, this.maxDate) > 0) || ($attrs.dateDisabled && $scope.dateDisabled({date: date, mode: $scope.datepickerMode})));
   };
 
+    this.customClass = function( date ) {
+      return $scope.customClass({date: date, mode: $scope.datepickerMode});
+    };
+
   // Split array into smaller arrays
   this.split = function(arr, size) {
     var arrays = [];
@@ -184,7 +189,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
     templateUrl: 'template/datepicker/datepicker.html',
     scope: {
       datepickerMode: '=?',
-      dateDisabled: '&'
+      dateDisabled: '&',
+      customClass: '&'
     },
     require: ['datepicker', '?^ngModel'],
     controller: 'DatepickerController',
@@ -440,7 +446,8 @@ function ($compile, $parse, $document, $position, dateFilter, dateParser, datepi
       currentText: '@',
       clearText: '@',
       closeText: '@',
-      dateDisabled: '&'
+      dateDisabled: '&',
+      customClass: '&'
     },
     link: function(scope, element, attrs, ngModel) {
       var dateFormat,
@@ -500,6 +507,9 @@ function ($compile, $parse, $document, $position, dateFilter, dateParser, datepi
       if (attrs.dateDisabled) {
         datepickerEl.attr('date-disabled', 'dateDisabled({ date: date, mode: mode })');
       }
+      if (attrs.customClass){
+        datepickerEl.attr('custom-class', 'customClass({ date: date, mode: mode })');
+      }
 
       function parseDate(viewValue) {
         if (angular.isNumber(viewValue)) {

src/datepicker/docs/demo.html

@@ -1,9 +1,21 @@
+<style>
+  .full button span {
+    background-color: limegreen;
+    border-radius: 32px;
+    color: black;
+  }
+  .partially button span {
+    background-color: orange;
+    border-radius: 32px;
+    color: black;
+  }
+</style>
 <div ng-controller="DatepickerDemoCtrl">
     <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
 
     <h4>Inline</h4>
     <div style="display:inline-block; min-height:290px;">
-        <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>
+      <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>
     </div>
 
     <h4>Popup</h4>

src/datepicker/docs/demo.js

@@ -32,4 +32,36 @@ angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($
 
   $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
   $scope.format = $scope.formats[0];
+
+  var tomorrow = new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  var afterTomorrow = new Date();
+  afterTomorrow.setDate(tomorrow.getDate() + 2);
+  $scope.events =
+    [
+      {
+        date: tomorrow,
+        status: 'full'
+      },
+      {
+        date: afterTomorrow,
+        status: 'partially'
+      }
+    ];
+
+  $scope.getDayClass = function(date, mode) {
+    if (mode === 'day') {
+      var dayToCheck = new Date(date).setHours(0,0,0,0);
+
+      for (var i=0;i<$scope.events.length;i++){
+        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
+
+        if (dayToCheck === currentDay) {
+          return $scope.events[i].status;
+        }
+      }
+    }
+
+    return '';
+  };
 });

src/datepicker/docs/readme.md

@@ -28,6 +28,10 @@ All settings can be provided as attributes in the `datepicker` or globally confi
  * `date-disabled (date, mode)`
  	_(Default: null)_ :
  	An optional expression to disable visible options based on passing date and current mode _(day|month|year)_.
+ 	
+ * `custom-class (date, mode)`
+ 	_(Default: null)_ :
+ 	An optional expression to add classes based on passing date and current mode _(day|month|year)_. 	
 
  * `show-weeks`
  	_(Defaults: true)_ :

src/datepicker/test/datepicker.spec.js

@@ -955,6 +955,31 @@ describe('datepicker directive', function () {
     });
   });
 
+  describe('custom-class expression', function () {
+    beforeEach(function() {
+      $rootScope.customClassHandler = jasmine.createSpy('customClassHandler');
+      element = $compile('<datepicker ng-model="date" custom-class="customClassHandler(date, mode)"></datepicker>')($rootScope);
+      $rootScope.$digest();
+    });
+
+    it('executes the customClass expression for each visible day plus one for validation', function() {
+      expect($rootScope.customClassHandler.calls.length).toEqual(42);
+    });
+
+    it('executes the customClass expression for each visible month plus one for validation', function() {
+      $rootScope.customClassHandler.reset();
+      clickTitleButton();
+      expect($rootScope.customClassHandler.calls.length).toEqual(12);
+    });
+
+    it('executes the customClass expression for each visible year plus one for validation', function() {
+      clickTitleButton();
+      $rootScope.customClassHandler.reset();
+      clickTitleButton();
+      expect($rootScope.customClassHandler.calls.length).toEqual(20);
+    });
+  });
+
   describe('formatting', function () {
     beforeEach(function() {
       $rootScope.dayTitle = 'MMMM, yy';

template/datepicker/day.html

@@ -13,7 +13,7 @@
   <tbody>
     <tr ng-repeat="row in rows track by $index">
       <td ng-show="showWeeks" class="text-center h6"><em>{{ weekNumbers[$index] }}</em></td>
-      <td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{dt.uid}}" aria-disabled="{{!!dt.disabled}}">
+      <td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{dt.uid}}" aria-disabled="{{!!dt.disabled}}" ng-class="dt.customClass">
         <button type="button" style="width:100%;" class="btn btn-default btn-sm" ng-class="{'btn-info': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="{'text-muted': dt.secondary, 'text-info': dt.current}">{{dt.label}}</span></button>
       </td>
     </tr>