feat(renderOn): Add renderOn configuration option which will cause the view to be rendered when the

renderOn accepts a string, which is the name of the event that will trigger the re-rendering of the

For example, if you want to disable any dates or times that are in the past.
You can $broadcast the event at an interval to disable times in the past (or any other time valid dates change).

closes #166, closes #175

Author: dalelotts

README.md

@@ -180,6 +180,15 @@ Causes the date/time picker to re-read its configuration when the specified even
 For example, perhaps the startView option in the configuration has changed and you would like the 
 new configuration to be used. You can $broadcast the event to cause this directive to use the new configuration. 
 
+### renderOn
+
+String. Default: null
+
+Causes the date/time picker to re-render its view when the specified event is received.
+
+For example, if you want to disable any dates or times that are in the past. 
+You can $broadcast the event at an interval to disable times in the past (or any other time valid dates change).
+
 ### dropdownSelector
 
 When used within a Bootstrap dropdown and jQuery, the selector specified in dropdownSelector will toggle the dropdown when a date/time is selected.

demo/demo-controller.js

@@ -74,6 +74,10 @@ angular.module('demo.demoController', [])
         configureOnConfig: {
           startView: 'year',
           configureOn: 'config-changed'
+        },
+        renderOnConfig: {
+          startView: 'year',
+          renderOn: 'valid-dates-changed'
         }
       };
 
@@ -88,5 +92,18 @@ angular.module('demo.demoController', [])
         $scope.config.configureOnConfig.startView = validViews[newIndex];
         $scope.$broadcast('config-changed');
       };
+
+      var selectable = true;
+
+      $scope.renderOnBeforeRender = function ($dates) {
+        angular.forEach($dates, function (dateObject) {
+          dateObject.selectable = selectable;
+        });
+      };
+
+      $scope.renderOnClick = function renderOnClick() {
+        selectable = (!selectable);
+        $scope.$broadcast('valid-dates-changed');
+      };
     }
   ]);

demo/index.html

@@ -377,6 +377,24 @@ <h4>Every time you click the button, the startView is changed</h4>
 
             </div>
         </div>
+
+        <div class="col-sm-6">
+            <h3>Embedded calendar with renderOn</h3>
+            <h4>Every time you click the button, the selectable attribute is toggled.</h4>
+
+            <p><code>renderOn: 'valid-dates-changed'</code> to cause the directive to re-render.</p>
+
+            <p><button class="btn btn-default" data-ng-click="renderOnClick()">Click me to re-render</button></p>
+
+            <div class="well">
+
+                <datetimepicker data-ng-model="data.renderOnDate"
+                                data-before-render='renderOnBeforeRender($dates)'
+                                data-datetimepicker-config="config.renderOnConfig"></datetimepicker>
+
+            </div>
+        </div>
+
     </div>
 </div>
 

karma.conf.js

@@ -56,7 +56,7 @@ module.exports = function (config) {
     // the configure thresholds
     thresholdReporter: {
       statements: 100,
-      branches: 97,
+      branches: 98,
       functions: 100,
       lines: 100
     },

src/js/datetimepicker.js

@@ -28,10 +28,11 @@
   'use strict';
   angular.module('ui.bootstrap.datetimepicker', [])
     .constant('dateTimePickerConfig', {
+      configureOn: null,
       dropdownSelector: null,
       minuteStep: 5,
       minView: 'minute',
-      configureOn: null,
+      renderOn: null,
       startView: 'day'
     })
     .directive('datetimepicker', ['$log', 'dateTimePickerConfig', function datetimepickerDirective($log, defaultConfig) {
@@ -62,10 +63,11 @@
       var validateConfiguration = function validateConfiguration(configuration) {
 
         var validOptions = [
+          'configureOn',
           'dropdownSelector',
           'minuteStep',
           'minView',
-          'configureOn',
+          'renderOn',
           'startView'
         ];
 
@@ -103,6 +105,12 @@
         if (configuration.configureOn !== null && configuration.configureOn.length < 1) {
           throw ('configureOn must not be an empty string');
         }
+        if (configuration.renderOn !== null && !angular.isString(configuration.renderOn)) {
+          throw ('renderOn must be a string');
+        }
+        if (configuration.renderOn !== null && configuration.renderOn.length < 1) {
+          throw ('renderOn must not be an empty string');
+        }
         if (configuration.dropdownSelector !== null && !angular.isString(configuration.dropdownSelector)) {
           throw ('dropdownSelector must be a string');
         }
@@ -431,6 +439,9 @@
               ngModelController.$render();
             });
           }
+          if (configuration.renderOn) {
+            scope.$on(configuration.renderOn, ngModelController.$render);
+          }
         }
       };
     }]);

test/configuration/renderOn.spec.js

@@ -0,0 +1,86 @@
+/*globals describe, beforeEach, it, expect, module, inject, jQuery, spyOn */
+
+/**
+ * @license angular-bootstrap-datetimepicker
+ * Copyright 2013 Knight Rider Consulting, Inc. http://www.knightrider.com
+ * License: MIT
+ */
+
+/**
+ *
+ *    @author        Dale "Ducky" Lotts
+ *    @since        7/21/13
+ */
+
+describe('renderOn', function () {
+  'use strict';
+  var $rootScope;
+  var $compile;
+  beforeEach(module('ui.bootstrap.datetimepicker'));
+  beforeEach(inject(function (_$compile_, _$rootScope_) {
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+    $rootScope.date = null;
+  }));
+
+  describe('throws exception', function () {
+    it('if value is an empty string', function () {
+      function compile() {
+        $compile('<datetimepicker data-ng-model="date" data-datetimepicker-config="{ renderOn: \'\' }"></datetimepicker>')($rootScope);
+      }
+
+      expect(compile).toThrow('renderOn must not be an empty string');
+    });
+    it('if value is numeric', function () {
+      function compile() {
+        $compile('<datetimepicker data-ng-model="date" data-datetimepicker-config="{ renderOn: 3 }"></datetimepicker>')($rootScope);
+      }
+
+      expect(compile).toThrow('renderOn must be a string');
+    });
+  });
+  describe('does NOT throw exception', function () {
+    it('if value is a string', function () {
+
+      $compile('<datetimepicker data-ng-model="date" data-datetimepicker-config="{ renderOn: \'foo\' }"></datetimepicker>')($rootScope);
+    });
+  });
+  describe('renderOn event', function () {
+    it('causes view to re-render after event is received', function () {
+
+
+      var selectable = true;
+
+      $rootScope.config = {
+        data: {
+          startView: 'year',
+          renderOn: 'valid-dates-changed'
+        }
+      };
+
+      $rootScope.beforeRender = function (dates) {
+        dates[2].selectable = selectable;
+      };
+
+      spyOn($rootScope, 'beforeRender').and.callThrough();
+
+      var element = $compile('<datetimepicker data-ng-model="date" data-before-render=\'beforeRender($dates)\' data-datetimepicker-config="config.data"></datetimepicker>')($rootScope);
+      $rootScope.$digest();
+
+
+      var selectedElement = jQuery(jQuery('.year', element)[2]);
+      expect(selectedElement.hasClass('disabled')).toBeFalsy();
+
+      selectable = false;
+
+      $rootScope.$broadcast('valid-dates-changed');
+      $rootScope.$digest();
+
+      expect($rootScope.beforeRender.calls.count()).toBe(2);
+
+      selectedElement = jQuery(jQuery('.year', element)[2]);
+      expect(selectedElement.hasClass('disabled')).toBeTruthy();
+    });
+  });
+});
+