fix(datepicker): fix initDate implementation in datepicker

Fixes use of initDate across datepickerConfig, datepickerOptions, and the initDate attribute
angular-ui · Mar 24, 2015 · 98e2bdf · 98e2bdf
1 parent c19b887
commit 98e2bdf
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 20 deletions.
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
@@ -44,7 +44,18 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
 
   $scope.datepickerMode = $scope.datepickerMode || datepickerConfig.datepickerMode;
   $scope.uniqueId = 'datepicker-' + $scope.$id + '-' + Math.floor(Math.random() * 10000);
-  this.activeDate = angular.isDefined($attrs.initDate) ? $scope.$parent.$eval($attrs.initDate) : new Date();
+
+  if(angular.isDefined($attrs.initDate)) {
+    this.activeDate = $scope.$parent.$eval($attrs.initDate) || new Date();
+    $scope.$parent.$watch($attrs.initDate, function(initDate){
+      if(initDate && (ngModelCtrl.$isEmpty(ngModelCtrl.$modelValue) || ngModelCtrl.$invalid)){
+        self.activeDate = initDate;
+        self.refreshView();
+      }
+    });
+  } else {
+    this.activeDate =  new Date();
+  }
 
   $scope.isActive = function(dateObject) {
     if (self.compare(dateObject.date, self.activeDate) === 0) {
@@ -479,13 +490,19 @@ function ($compile, $parse, $document, $position, dateFilter, dateParser, datepi
       // datepicker element
       var datepickerEl = angular.element(popupEl.children()[0]);
       if ( attrs.datepickerOptions ) {
-        angular.forEach(scope.$parent.$eval(attrs.datepickerOptions), function( value, option ) {
+        var options = scope.$parent.$eval(attrs.datepickerOptions);
+        if(options.initDate) {
+          scope.initDate = options.initDate;
+          datepickerEl.attr( 'init-date', 'initDate' );
+          delete options.initDate;
+        }
+        angular.forEach(options, function( value, option ) {
           datepickerEl.attr( cameltoDash(option), value );
         });
       }
 
       scope.watchData = {};
-      angular.forEach(['minDate', 'maxDate', 'datepickerMode'], function( key ) {
+      angular.forEach(['minDate', 'maxDate', 'datepickerMode', 'initDate'], function( key ) {
         if ( attrs[key] ) {
           var getAttribute = $parse(attrs[key]);
           scope.$parent.$watch(getAttribute, function(value){
@@ -510,10 +527,6 @@ function ($compile, $parse, $document, $position, dateFilter, dateParser, datepi
       if (attrs.customClass){
         datepickerEl.attr('custom-class', 'customClass({ date: date, mode: mode })');
       }
-      if (attrs.initDate) {
-        scope.initDate = scope.$parent.$eval(attrs.initDate);
-        datepickerEl.attr('init-date', 'initDate');
-      }
 
       function parseDate(viewValue) {
         if (angular.isNumber(viewValue)) {

diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
@@ -1337,23 +1337,107 @@ describe('datepicker directive', function () {
     });
 
     describe('attribute `datepickerOptions`', function () {
-      var weekHeader, weekElement;
+
+      describe('show-weeks', function(){
+        var weekHeader, weekElement;
+        beforeEach(function() {
+          $rootScope.opts = {
+            'show-weeks': false
+          };
+          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);
+          $rootScope.$digest();
+          assignElements(wrapElement);
+
+          weekHeader = getLabelsRow().find('th').eq(0);
+          weekElement = element.find('tbody').find('tr').eq(1).find('td').eq(0);
+        });
+
+        it('hides week numbers based on variable', function() {
+          expect(weekHeader.text()).toEqual('');
+          expect(weekHeader).toBeHidden();
+          expect(weekElement).toBeHidden();
+        });
+      });
+
+      describe('init-date', function(){
+        beforeEach(function() {
+          $rootScope.date = null;
+          $rootScope.opts = {
+            'initDate': new Date('November 9, 1980')
+          };
+          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);
+          $rootScope.$digest();
+          assignElements(wrapElement);
+        });
+
+        it('does not alter the model', function() {
+          expect($rootScope.date).toBe(null);
+        });
+
+        it('shows the correct title', function() {
+          expect(getTitle()).toBe('November 1980');
+        });
+      });
+    });
+
+    describe('attribute `init-date`', function(){
       beforeEach(function() {
-        $rootScope.opts = {
-          'show-weeks': false
-        };
-        var wrapElement = $compile('<div><input ng-model="date" datepicker-popup datepicker-options="opts" is-open="true"></div>')($rootScope);
-        $rootScope.$digest();
-        assignElements(wrapElement);
+        $rootScope.date = null;
+        $rootScope.initDate = new Date('November 9, 1980');
+      });
+
+      describe('when initially set', function(){
+        beforeEach(function() {
+          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup init-date="initDate" is-open="true"></div>')($rootScope);
+          $rootScope.$digest();
+          assignElements(wrapElement);
+        });
+
+        it('does not alter the model', function() {
+          expect($rootScope.date).toBe(null);
+        });
+
+        it('shows the correct title', function() {
+          expect(getTitle()).toBe('November 1980');
+        });
+      });
+
+      describe('when modified before date selected.', function(){
+        beforeEach(function() {
+          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup init-date="initDate" is-open="true"></div>')($rootScope);
+          $rootScope.$digest();
+          assignElements(wrapElement);
+
+          $rootScope.initDate = new Date('December 20, 1981');
+          $rootScope.$digest();
+        });
+
+        it('does not alter the model', function() {
+          expect($rootScope.date).toBe(null);
+        });
 
-        weekHeader = getLabelsRow().find('th').eq(0);
-        weekElement = element.find('tbody').find('tr').eq(1).find('td').eq(0);
+        it('shows the correct title', function() {
+          expect(getTitle()).toBe('December 1981');
+        });
       });
 
-      it('hides week numbers based on variable', function() {
-        expect(weekHeader.text()).toEqual('');
-        expect(weekHeader).toBeHidden();
-        expect(weekElement).toBeHidden();
+      describe('when modified after date selected.', function(){
+        beforeEach(function() {
+          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup init-date="initDate" is-open="true"></div>')($rootScope);
+          $rootScope.$digest();
+          assignElements(wrapElement);
+          $rootScope.date = new Date('April 1, 1982');
+          $rootScope.initDate = new Date('December 20, 1981');
+          $rootScope.$digest();
+        });
+
+        it('does not alter the model', function() {
+          expect($rootScope.date).toEqual(new Date('April 1, 1982'));
+        });
+
+        it('shows the correct title', function() {
+          expect(getTitle()).toBe('April 1982');
+        });
       });
     });