Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

feat(datepicker): add ngModelOptions support #5933

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/datepicker/datepicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
5 changes: 5 additions & 0 deletions src/datepicker/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`)_ -
Expand Down
17 changes: 17 additions & 0 deletions src/datepicker/test/datepicker.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
26 changes: 6 additions & 20 deletions src/datepickerPopup/popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -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_;
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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;
});
}
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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;
}
}

Expand Down
29 changes: 22 additions & 7 deletions src/datepickerPopup/test/popup.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}));
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
});
Expand Down Expand Up @@ -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);
});
Expand Down