fix(pfBootstrapDatepicker): added callback function when date changes

Author: dtaylor113

src/datepicker/bootstrap-datepicker.component.js

@@ -4,13 +4,14 @@ angular.module('patternfly.datepicker').component('pfBootstrapDatepicker', {
     format: '@?',
     dateOptions: '<?',
     isOpen: '<?',
-    popupPlacement: '@?'
+    popupPlacement: '@?',
+    onDateChange: '&'
   },
   templateUrl: 'datepicker/datepicker.html',
   controller: function () {
     'use strict';
 
-    var ctrl = this;
+    var ctrl = this, prevDate;
 
     ctrl.defaultDateOptions = {
       showWeeks : false,
@@ -31,8 +32,18 @@ angular.module('patternfly.datepicker').component('pfBootstrapDatepicker', {
     };
 
     ctrl.$onChanges = function (changes) {
+      prevDate = angular.copy(ctrl.date);
       _.defaults(ctrl.isOpen, ctrl.defaultIsOpen);
     };
 
+    ctrl.$doCheck = function () {
+      // do a deep compare on data
+      if (!angular.equals(ctrl.date, prevDate)) {
+        prevDate = angular.copy(ctrl.date);
+        if (ctrl.onDateChange) {
+          ctrl.onDateChange({newDate: ctrl.date});
+        }
+      }
+    };
   }
 });

src/datepicker/examples/bootstrap.datepicker.js

@@ -5,6 +5,7 @@
  *
  * @param {date} date Must be a Javascript Date - to be displayed in the input. Can be left empty.
  * @param {string} format Optional date format for displayed dates ('MM/dd/yyyy' by default).
+ * @param {function} on-date-change Optional user defined function which is called when the date is changed by the picker.<br/>
  * @param {boolean} isOpen Optional boolean for determining whether or not to have the datepicker default to open (false by default).
  * @param {string} popupPlacement Optional configuration string used to position the popup datepicker relative to the input element. See {@link https://angular-ui.github.io/bootstrap/#datepickerPopup Angular UI Datepicker Popup}.
  * @param {object} dateOptions Optional uib-datepicker configuration object. See {@link https://angular-ui.github.io/bootstrap/#datepicker Angular UI Datepicker}.
@@ -16,33 +17,56 @@
  <example module="patternfly.datepicker">
 
    <file name="index.html">
-      <div ng-controller="DemoBootstrapDatepicker">
-          <pf-bootstrap-datepicker
-                   date="date">
-          </pf-bootstrap-datepicker>
-          <pf-bootstrap-datepicker
-                   date=""
+      <div ng-controller="DemoBootstrapDatepicker" class="row example-container">
+        <div class="form-group">
+          <label class="col-sm-2 control-label" for="date-one">Date One:</label>
+            <pf-bootstrap-datepicker
+                   id="date-one"
+                   date="dateOne"
+                   on-date-change="firstDateChanged(newDate)">
+            </pf-bootstrap-datepicker>
+          <label class="col-sm-2 control-label" for="date-one">Date Two:</label>
+            <pf-bootstrap-datepicker
+                   id="date-two"
+                   date="dateTwo"
                    format="{{format1}}"
                    is-open="isOpen"
                    popup-placement="{{popupPlacement}}"
-                   date-options="dateOptions">
-          </pf-bootstrap-datepicker>
+                   date-options="dateOptions"
+                   on-date-change="secondDateChanged(newDate)">
+            </pf-bootstrap-datepicker>
+        </div>
+        <div class="col-md-12">
+          <label style="font-weight:normal;vertical-align:center;">Events: </label>
+        </div>
+        <div class="col-md-12">
+          <textarea rows="10" class="col-md-12">{{eventText}}</textarea>
+        </div>
       </div>
    </file>
 
    <file name="script.js">
    angular.module('patternfly.datepicker').controller('DemoBootstrapDatepicker', function( $scope ) {
+      $scope.eventText = '';
 
       // first datepicker
-      $scope.date = new Date("Jan 1, 2000");
+      $scope.dateOne = new Date("Jan 1, 2000");
+      $scope.firstDateChanged = function(date) {
+        $scope.eventText = 'Date One Updated to: ' + date + '\r\n' + $scope.eventText;
+      };
 
       // second datepicker
+      $scope.dateTwo = new Date("Feb 1, 2000");
       $scope.format1 = "MM/dd/yy";
       $scope.dateOptions = {
         showWeeks : true
       };
       $scope.isOpen = true;
       $scope.popupPlacement = "bottom-left";
+
+      $scope.secondDateChanged = function(date) {
+          $scope.eventText = 'Date Two Updated to: ' + date + '\r\n' + $scope.eventText;
+       };
    });
    </file>
 

test/datepicker/bootstrap-datepicker.spec.js

@@ -26,8 +26,12 @@ describe('Component:  pfBootstrapDatepicker', function () {
     $scope.dateOptions = {
       showWeeks : true
     };
+    $scope.callbackExecuted = false;
+    $scope.dateChangedCallback = function (newDate) {
+      $scope.callbackExecuted = true;
+    };
 
-    var htmlTmp = '<pf-bootstrap-datepicker date="date" format="{{format}}"></pf-bootstrap-datepicker>';
+    var htmlTmp = '<pf-bootstrap-datepicker date="date" format="{{format}}" on-date-change="dateChangedCallback(newDate)"></pf-bootstrap-datepicker>';
 
     compileHTML(htmlTmp, $scope);
   });
@@ -75,4 +79,17 @@ describe('Component:  pfBootstrapDatepicker', function () {
 
   });
 
+  it('should execute callback when date changed', function () {
+    expect($scope.callbackExecuted).toBeFalsy();
+
+    var button = element.find('button.datepicker')[0];
+    eventFire(button, 'click');
+
+    // click on the tenth date in calendar popup
+    var dateButton = element.find('button.btn-sm')[10];
+    eventFire(dateButton, 'click');
+
+    expect($scope.callbackExecuted).toBeTruthy();
+  });
+
 });