feat(datepicker): let button group can be customise

Author: ariesjia

.gitignore

@@ -8,6 +8,7 @@ lib-cov
 *.gz
 *.swp
 *.swo
+.idea
 .DS_Store
 
 pids

src/datepicker/datepicker.js

@@ -335,6 +335,10 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon
         'ng-model': 'date',
         'ng-change': 'dateSelection()'
       });
+
+      if (angular.isDefined(attrs.buttonGroupTemplateUrl)) {
+          popupEl.attr('button-group-template-url', attrs.buttonGroupTemplateUrl);
+      }
       var datepickerEl = popupEl.find('datepicker');
       if (attrs.datepickerOptions) {
         datepickerEl.attr(angular.extend({}, originalScope.$eval(attrs.datepickerOptions)));
@@ -446,6 +450,9 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon
       scope.today = function() {
         $setModelValue(originalScope, new Date());
       };
+      scope.selectDate = function(date) {
+        $setModelValue(originalScope,  date ? new Date(date) : new Date());
+      };
       scope.clear = function() {
         $setModelValue(originalScope, null);
       };
@@ -455,7 +462,7 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon
   };
 }])
 
-.directive('datepickerPopupWrap', function() {
+.directive('datepickerPopupWrap',["$compile", function($compile) {
   return {
     restrict:'E',
     replace: true,
@@ -466,6 +473,24 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon
         event.preventDefault();
         event.stopPropagation();
       });
+      var popupEl = angular.element('<datepicker-popup-button-group></datepicker-popup-button-group>');
+      if (angular.isDefined(attrs.buttonGroupTemplateUrl)) {
+        popupEl.attr('button-group-template-url', attrs.buttonGroupTemplateUrl);
+      }
+      element.find("li").eq(2).prepend($compile(popupEl)(scope));
+    }
+  };
+}])
+
+.directive('datepickerPopupButtonGroup',["$parse", "$templateCache", "$http", "$compile",
+        function($parse, $templateCache, $http, $compile) {
+  return {
+    restrict:'AE',
+    link:function (scope, element, attrs) {
+        var tplUrl = attrs.buttonGroupTemplateUrl || 'template/datepicker/popup-button-group.html';
+        $http.get(tplUrl, {cache: $templateCache}).success(function(tplContent){
+            element.replaceWith($compile(tplContent.trim())(scope));
+        });
     }
   };
-});
+}]);

src/datepicker/test/datepicker.spec.js

@@ -3,6 +3,7 @@ describe('datepicker directive', function () {
   beforeEach(module('ui.bootstrap.datepicker'));
   beforeEach(module('template/datepicker/datepicker.html'));
   beforeEach(module('template/datepicker/popup.html'));
+  beforeEach(module('template/datepicker/popup-button-group.html'));
   beforeEach(inject(function(_$compile_, _$rootScope_) {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
@@ -1236,6 +1237,8 @@ describe('datepicker directive', function () {
 
     });
 
+
+
   });
 });
 
@@ -1259,4 +1262,28 @@ describe('datepicker directive with empty initial state', function () {
   it('is shows rows with days', function() {
     expect(element.find('tbody').find('tr').length).toBeGreaterThan(3);
   });
+});
+
+describe('',function(){
+    var $rootScope, element, $httpBackend;
+
+    beforeEach(module('ui.bootstrap.datepicker'));
+    beforeEach(module('template/datepicker/popup.html'));
+    beforeEach(inject(function(_$compile_, _$rootScope_,_$httpBackend_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $httpBackend = _$httpBackend_;
+    }));
+
+    it("should send request to get customer template", function(){
+        var templateUrl = "test.html",
+            html = '<div><button type="button" ng-click="selectDate(\'2012-01-01\')">Next financial day</button></div>';
+        $httpBackend.whenGET(templateUrl).respond(200, html);
+        element = $compile('<datepicker-popup-wrap button-group-template-url="' + templateUrl + '"></datepicker-popup-wrap>')($rootScope);
+        $rootScope.$digest();
+        $httpBackend.flush();
+
+        expect(element.find('button').text()).toEqual("Next financial day");
+    });
+
 });

template/datepicker/popup-button-group.html

@@ -0,0 +1,6 @@
+<span class="btn-group">
+    <button type="button" class="btn btn-small btn-inverse" ng-click="today()">{{currentText}}</button>
+    <button type="button" class="btn btn-small btn-info" ng-click="showWeeks = ! showWeeks"
+            ng-class="{active: showWeeks}">{{toggleWeeksText}}</button>
+    <button type="button" class="btn btn-small btn-danger" ng-click="clear()">{{clearText}}</button>
+</span>

template/datepicker/popup.html

@@ -2,11 +2,6 @@
 	<li ng-transclude></li>
 	<li class="divider"></li>
 	<li style="padding: 9px;">
-		<span class="btn-group">
-			<button type="button" class="btn btn-small btn-inverse" ng-click="today()">{{currentText}}</button>
-			<button type="button" class="btn btn-small btn-info" ng-click="showWeeks = ! showWeeks" ng-class="{active: showWeeks}">{{toggleWeeksText}}</button>
-			<button type="button" class="btn btn-small btn-danger" ng-click="clear()">{{clearText}}</button>
-		</span>
 		<button type="button" class="btn btn-small btn-success pull-right" ng-click="isOpen = false">{{closeText}}</button>
 	</li>
 </ul>