fix(datepicker): min date, max date today on initial month/year display[issue#1050]

.gitignore

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

src/datepicker/datepicker.js

@@ -190,6 +190,13 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.position'])
           } else if ( updateSelected ) {
             selected = date;
           }
+        }else{
+            if( datepickerCtrl.minDate && datepickerCtrl.minDate > selected ){
+                selected = datepickerCtrl.minDate;
+            }
+            if( datepickerCtrl.maxDate && datepickerCtrl.maxDate < selected ){
+                selected = datepickerCtrl.maxDate;
+            }
         }
         ngModel.$setValidity('date', valid);
 
@@ -289,6 +296,14 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon
         scope.closeText = angular.isDefined(text) ? text : datepickerPopupConfig.closeText;
       });
 
+      if(attrs.onCustomerButtonClick){
+        var onCustomerButtonClick = $parse(attrs.onCustomerButtonClick);
+         scope.onCustomerButtonClick = function(){
+              var param = Array.prototype.slice.call(arguments, 0);
+              onCustomerButtonClick(originalScope, {$param: param});
+         };
+      }
+
       var getIsOpen, setIsOpen;
       if ( attrs.isOpen ) {
         getIsOpen = $parse(attrs.isOpen);
@@ -328,6 +343,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)));
@@ -439,6 +458,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);
       };
@@ -448,7 +470,7 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon
   };
 }])
 
-.directive('datepickerPopupWrap', function() {
+.directive('datepickerPopupWrap',["$compile", function($compile) {
   return {
     restrict:'E',
     replace: true,
@@ -459,6 +481,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_;
@@ -1195,6 +1196,49 @@ describe('datepicker directive', function () {
         expect(inputEl.val()).toBe('pizza');
       });
     });
+
+    describe('max min logic', function() {
+      var monthNames = [ "January", "February", "March", "April", "May", "June",
+              "July", "August", "September", "October", "November", "December" ],
+          now = new Date(),
+          lastYear = now.getFullYear() - 1,
+          nextYear = now.getFullYear() + 1;
+
+      beforeEach(inject(function() {
+        $rootScope.maxdate = null;
+        $rootScope.mindate = null;
+        $rootScope.date = null;
+        element = $compile('<datepicker ng-model="$parent.date" max="maxdate" min="mindate" ></datepicker>')($rootScope);
+        $rootScope.$digest();
+      }));
+
+      it('should be show today to default', function() {
+        expect(getTitle()).toEqual(monthNames[now.getMonth()] + " " + now.getFullYear());
+      });
+
+      it('should be show today to default', function() {
+        $rootScope.mindate = new Date(lastYear, 8, 1);
+        $rootScope.maxdate = new Date(nextYear, 8, 1);
+        $rootScope.$digest();
+        expect(getTitle()).toEqual(monthNames[now.getMonth()] + " " + now.getFullYear());
+      });
+
+      it('initial date is min when min after current date', function() {
+        $rootScope.mindate = new Date(nextYear, 8, 1);
+        $rootScope.$digest();
+        expect(getTitle()).toEqual('September ' + nextYear );
+      });
+
+      it('initial date is max when max before current date', function() {
+        $rootScope.maxdate = new Date(lastYear, 8, 1);
+        $rootScope.$digest();
+        expect(getTitle()).toEqual('September ' + lastYear);
+      });
+
+    });
+
+
+
   });
 });
 
@@ -1218,4 +1262,46 @@ 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('customise button group',function(){
+    var $rootScope, element, $httpBackend;
+
+    beforeEach(module('ui.bootstrap.datepicker'));
+    beforeEach(module('template/datepicker/datepicker.html'));
+    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(){
+        $rootScope.onCustomerButtonClick = function(){};
+        var templateUrl = "test.html",
+            html = '<div><button type="button" ng-click="onCustomerButtonClick(\'next financial\')">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");
+    });
+
+    it("should send customer click event", function(){
+        $rootScope.onCustomerButtonClick = function(){};
+        spyOn($rootScope,"onCustomerButtonClick").andCallThrough();
+        var templateUrl = "test.html",
+            html = '<div><button class="customerBtn" type="button" ng-click="onCustomerButtonClick(\'next financial\')">Next financial day</button></div>';
+        $httpBackend.whenGET(templateUrl).respond(200, html);
+        element = $compile('<div><input type="text" datepicker-popup="" on-customer-button-click="onCustomerButtonClick($param);" ng-model="dt" button-group-template-url="' + templateUrl + '"/></div>')($rootScope);
+        $rootScope.$digest();
+        $httpBackend.flush();
+
+        element.find('.customerBtn').click();
+        $rootScope.$digest();
+        expect($rootScope.onCustomerButtonClick).toHaveBeenCalledWith(['next financial']);
+    });
+
+
 });

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>