From f0691926a5efece0c2fce21bb2738ad66dd6c68a Mon Sep 17 00:00:00 2001 From: Wesley Cho Date: Sat, 28 May 2016 07:55:33 -0700 Subject: [PATCH] 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 --- src/datepicker/datepicker.js | 4 +++- src/datepicker/docs/readme.md | 5 +++++ src/datepicker/test/datepicker.spec.js | 17 +++++++++++++++ src/datepickerPopup/popup.js | 26 ++++++----------------- src/datepickerPopup/test/popup.spec.js | 29 +++++++++++++++++++------- 5 files changed, 53 insertions(+), 28 deletions(-) diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js index f6aaa637b6..cad3c5067a 100644 --- 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 index c0e5ffe076..e46d00f47b 100644 --- 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` + C + _(Default: `null`)_ - + Sets `ngModelOptions` for datepicker. This can be overridden through attribute usage + * `shortcutPropagation` C _(Default: `false`)_ - diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js index f1651eee47..1a1e06aa62 100644 --- 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('')($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 index 071367e34a..3a6c9853a0 100644 --- 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('
'); - 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,7 +181,7 @@ 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 = {}; @@ -203,7 +189,7 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $ 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 index 0fb5729507..b9d77c65c2 100644 --- 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('
')($rootScope); + $rootScope.ngModelOptions = { + allowInvalid: true + }; + element = $compile('
')($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('
')($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('
')($rootScope); + var wrapper = $compile('
')($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('
')($rootScope); + var wrapper = $compile('
')($rootScope); $rootScope.$digest(); assignElements(wrapper); });