feat(datepicker): add ngModelOptions support

- Adds support for ngModelOptions in the `datepicker-options` object BREAKING CHANGE: This modifies the current behavior around the datepicker & popup's ngModelOptions, which may affect custom components that are built around both Closes #5933 Fixes #5825
angular-ui · May 28, 2016 · 23b91d9 · 23b91d9
1 parent 0530352
commit 23b91d9
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 28 deletions.
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
@@ -156,7 +156,9 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
 
   this.init = function(ngModelCtrl_) {
     ngModelCtrl = ngModelCtrl_;
-    ngModelOptions = ngModelCtrl_.$options || datepickerConfig.ngModelOptions;
+    ngModelOptions = ngModelCtrl_.$options ||
+      $scope.datepickerOptions.ngModelOptions ||
+      datepickerConfig.ngModelOptions;
     if ($scope.datepickerOptions.initDate) {
       self.activeDate = dateParser.fromTimezone($scope.datepickerOptions.initDate, ngModelOptions.timezone) || new Date();
       $scope.$watch('datepickerOptions.initDate', function(initDate) {

diff --git a/src/datepicker/docs/readme.md b/src/datepicker/docs/readme.md
@@ -104,6 +104,11 @@ Apart from the previous settings, to configure the uib-datepicker you need to cr
     _(Default: `day`)_ -
     Sets a lower limit for mode.
 
+  * `ngModelOptions`
+    <small class="badge">C</small>
+    _(Default: `null`)_ -
+    Sets `ngModelOptions` for datepicker. This can be overridden through attribute usage
+
   * `shortcutPropagation`
     <small class="badge">C</small>
     _(Default: `false`)_ -

diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
@@ -953,6 +953,23 @@ describe('datepicker', function() {
     });
 
     describe('attribute `datepicker-options`', function() {
+      describe('ngModelOptions', function() {
+          beforeEach(inject(function() {
+            $rootScope.date = new Date('2005-11-07T10:00:00.000Z');
+            $rootScope.options = {
+              ngModelOptions: {
+                timezone: '+600'
+              }
+            };
+            element = $compile('<uib-datepicker ng-model="date" datepicker-options="options"></uib-datepicker>')($rootScope);
+            $rootScope.$digest();
+          }));
+
+          it('supports ngModelOptions from options object and sets date to appropriate date', function() {
+            expectSelectedElement(8);
+          });
+      });
+
       describe('startingDay', function() {
         beforeEach(function() {
           $rootScope.options = {

diff --git a/src/datepickerPopup/popup.js b/src/datepickerPopup/popup.js
@@ -28,8 +28,7 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $
     isHtml5DateInput = false;
   var dateFormat, closeOnDateSelection, appendToBody, onOpenFocus,
     datepickerPopupTemplateUrl, datepickerTemplateUrl, popupEl, datepickerEl, scrollParentEl,
-    ngModel, ngModelOptions, $popup, altInputFormats, watchListeners = [],
-    timezone;
+    ngModel, ngModelOptions, $popup, altInputFormats, watchListeners = [];
 
   this.init = function(_ngModel_) {
     ngModel = _ngModel_;
@@ -85,19 +84,6 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $
 
     // popup element used to display calendar
     popupEl = angular.element('<div uib-datepicker-popup-wrap><div uib-datepicker></div></div>');
-    if (ngModelOptions) {
-      timezone = ngModelOptions.timezone;
-      $scope.ngModelOptions = angular.copy(ngModelOptions);
-      $scope.ngModelOptions.timezone = null;
-      if ($scope.ngModelOptions.updateOnDefault === true) {
-        $scope.ngModelOptions.updateOn = $scope.ngModelOptions.updateOn ?
-          $scope.ngModelOptions.updateOn + ' default' : 'default';
-      }
-
-      popupEl.attr('ng-model-options', 'ngModelOptions');
-    } else {
-      timezone = null;
-    }
 
     popupEl.attr({
       'ng-model': 'date',
@@ -137,13 +123,13 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $
           value = new Date(value);
         }
 
-        $scope.date = dateParser.fromTimezone(value, timezone);
+        $scope.date = value;
 
         return dateParser.filter($scope.date, dateFormat);
       });
     } else {
       ngModel.$formatters.push(function(value) {
-        $scope.date = dateParser.fromTimezone(value, timezone);
+        $scope.date = value;
         return value;
       });
     }
@@ -195,15 +181,15 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $
 
   $scope.isDisabled = function(date) {
     if (date === 'today') {
-      date = dateParser.fromTimezone(new Date(), timezone);
+      date = new Date();
     }
 
     var dates = {};
     angular.forEach(['minDate', 'maxDate'], function(key) {
       if (!$scope.datepickerOptions[key]) {
         dates[key] = null;
       } else if (angular.isDate($scope.datepickerOptions[key])) {
-        dates[key] = dateParser.fromTimezone(new Date($scope.datepickerOptions[key]), timezone);
+        dates[key] = new Date($scope.datepickerOptions[key]);
       } else {
         if ($datepickerPopupLiteralWarning) {
           $log.warn('Literal date support has been deprecated, please switch to date object usage');
@@ -344,7 +330,7 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $
     if (angular.isString(viewValue)) {
       var date = parseDateString(viewValue);
       if (!isNaN(date)) {
-        return dateParser.toTimezone(date, timezone);
+        return date;
       }
     }
 

diff --git a/src/datepickerPopup/test/popup.spec.js b/src/datepickerPopup/test/popup.spec.js
@@ -175,8 +175,10 @@ describe('datepicker popup', function() {
       $sniffer = _$sniffer_;
 
       $rootScope.date = new Date('September 30, 2010 15:30:00');
-      $rootScope.modelOptions = {allowInvalid: true};
-      element = $compile('<div><input ng-model="date" ng-model-options="modelOptions" uib-datepicker-popup></div>')($rootScope);
+      $rootScope.ngModelOptions = {
+        allowInvalid: true
+      };
+      element = $compile('<div><input ng-model="date" ng-model-options="ngModelOptions" uib-datepicker-popup></div>')($rootScope);
       inputEl = element.find('input');
       $rootScope.$digest();
     }));
@@ -557,8 +559,13 @@ describe('datepicker popup', function() {
       $timeout = _$timeout_;
       $rootScope.isopen = true;
       $rootScope.date = new Date('2010-09-30T10:00:00.000Z');
+      $rootScope.options = {
+        ngModelOptions: {
+          updateOn: 'default'
+        }
+      };
       wrapElement = $compile('<div><input ng-model="date" ' +
-        'ng-model-options="{ updateOn: \'default\' }" ' +
+        'datepicker-options="options" ' +
         'uib-datepicker-popup is-open="isopen"><div>')($rootScope);
       $rootScope.$digest();
       assignElements(wrapElement);
@@ -1598,9 +1605,13 @@ describe('datepicker popup', function() {
 
       beforeEach(function() {
         $rootScope.date = new Date('2010-09-30T10:00:00.000Z');
-        $rootScope.ngModelOptions = { timezone: '+600' };
+        $rootScope.options = {
+          ngModelOptions: {
+            timezone: '+600'
+          }
+        };
         $rootScope.isopen = true;
-        var wrapper = $compile('<div><input ng-model="date" uib-datepicker-popup="MM/dd/yyyy" ng-model-options="ngModelOptions" is-open="isopen"></div>')($rootScope);
+        var wrapper = $compile('<div><input ng-model="date" uib-datepicker-popup="MM/dd/yyyy" datepicker-options="options" is-open="isopen"></div>')($rootScope);
         $rootScope.$digest();
         assignElements(wrapper);
       });
@@ -1631,9 +1642,13 @@ describe('datepicker popup', function() {
 
       beforeEach(function() {
         $rootScope.date = new Date('2010-09-30T10:00:00.000Z');
-        $rootScope.ngModelOptions = { timezone: '+600' };
+        $rootScope.options = {
+          ngModelOptions: {
+            timezone: '+600'
+          }
+        };
         $rootScope.isopen = true;
-        var wrapper = $compile('<div><input type="date" ng-model="date" uib-datepicker-popup ng-model-options="ngModelOptions" is-open="isopen"></div>')($rootScope);
+        var wrapper = $compile('<div><input type="date" ng-model="date" uib-datepicker-popup datepicker-options="options" is-open="isopen"></div>')($rootScope);
         $rootScope.$digest();
         assignElements(wrapper);
       });