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

Commit

Permalink
feat(datepicker): move attribute support to options
Browse files Browse the repository at this point in the history 
- Move some attribute usage to datepickerOptions

Closes #5528
  • Loading branch information
@wesleycho
wesleycho committed Feb 24, 2016
1 parent b245242 commit d880aea
Show file tree
Hide file tree
Showing 3 changed files with 195 additions and 23 deletions.
24 changes: 22 additions & 2 deletions src/datepicker/datepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst

if (optionsUsed) {
[
'customClass',
'dateDisabled',
'datepickerMode',
'formatDay',
'formatDayHeader',
Expand All @@ -54,6 +56,10 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
'yearRows'
].forEach(function(key) {
switch (key) {
case 'customClass':
case 'dateDisabled':
$scope[key] = $scope.datepickerOptions[key] || angular.noop;
break;
case 'datepickerMode':
$scope.datepickerMode = angular.isDefined($scope.datepickerOptions.datepickerMode) ?
$scope.datepickerOptions.datepickerMode : datepickerConfig.datepickerMode;
Expand Down Expand Up @@ -156,6 +162,12 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
}
});

angular.forEach(['dateDisabled', 'customClass'], function(key) {
if (angular.isDefined($attrs[key]) && datepickerAttributeWarning) {
$log.warn('uib-datepicker ' + key + ' attribute usage is deprecated, use datepicker-options attribute instead');
}
});

if (angular.isDefined($attrs.startingDay)) {
if (datepickerAttributeWarning) {
$log.warn('uib-datepicker startingDay attribute usage is deprecated, use datepicker-options attribute instead');
Expand Down Expand Up @@ -320,7 +332,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
return $scope.disabled ||
this.minDate && this.compare(date, this.minDate) < 0 ||
this.maxDate && this.compare(date, this.maxDate) > 0 ||
$attrs.dateDisabled && $scope.dateDisabled({date: date, mode: $scope.datepickerMode});
$scope.dateDisabled && $scope.dateDisabled({date: date, mode: $scope.datepickerMode});
};

this.customClass = function(date) {
Expand Down Expand Up @@ -865,7 +877,7 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $

angular.forEach(['minMode', 'maxMode', 'datepickerMode', 'shortcutPropagation'], function(key) {
if ($attrs[key]) {
if (key !== 'datepickerMode' && datepickerPopupAttributeWarning) {
if (datepickerPopupAttributeWarning) {
$log.warn('uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead');
}

Expand Down Expand Up @@ -920,6 +932,10 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $
});

if ($attrs.dateDisabled) {
if (datepickerPopupAttributeWarning) {
$log.warn('uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead');
}

datepickerEl.attr('date-disabled', 'dateDisabled({ date: date, mode: mode })');
}

Expand All @@ -934,6 +950,10 @@ function($scope, $element, $attrs, $compile, $log, $parse, $window, $document, $
});

if ($attrs.customClass) {
if (datepickerPopupAttributeWarning) {
$log.warn('uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead');
}

datepickerEl.attr('custom-class', 'customClass({ date: date, mode: mode })');
}

Expand Down
3 changes: 3 additions & 0 deletions src/datepicker/docs/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ The datepicker has 3 modes:

The supported options are:

- customClass
- dateDisabled
- datepickerMode
- formatDay
- formatDayHeader
- formatDayTitle
Expand Down
191 changes: 170 additions & 21 deletions src/datepicker/test/datepicker.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,88 @@ describe('datepicker', function() {
expect($log.warn).not.toHaveBeenCalled();
});

it('should log warning for customClass attribute usage', function() {
inject(function(_$log_, _$rootScope_, _$compile_) {
$log = _$log_;
$scope = _$rootScope_.$new();
$compile = _$compile_;
});

$scope.locals = {
date: new Date(),
customClass: 'none'
};

spyOn($log, 'warn');
element = $compile('<uib-datepicker ng-model="locals.date" custom-class="locals.customClass"></uib-datepicker>')($scope);
$scope.$digest();

expect($log.warn).toHaveBeenCalledWith('uib-datepicker customClass attribute usage is deprecated, use datepicker-options attribute instead');
});

it('should suppress warning for customClass attribute usage', function() {
module(function($provide) {
$provide.value('uibDatepickerAttributeWarning', false);
});
inject(function(_$log_, _$rootScope_, _$compile_) {
$log = _$log_;
$scope = _$rootScope_.$new();
$compile = _$compile_;
});

$scope.locals = {
date: new Date(),
customClass: 'none'
};

spyOn($log, 'warn');
element = $compile('<uib-datepicker ng-model="locals.date" custom-class="locals.customClass"></uib-datepicker>')($scope);
$scope.$digest();

expect($log.warn).not.toHaveBeenCalled();
});

it('should log warning for dateDisabled attribute usage', function() {
inject(function(_$log_, _$rootScope_, _$compile_) {
$log = _$log_;
$scope = _$rootScope_.$new();
$compile = _$compile_;
});

$scope.locals = {
date: new Date(),
dateDisabled: false
};

spyOn($log, 'warn');
element = $compile('<uib-datepicker ng-model="locals.date" date-disabled="locals.dateDisabled"></uib-datepicker>')($scope);
$scope.$digest();

expect($log.warn).toHaveBeenCalledWith('uib-datepicker dateDisabled attribute usage is deprecated, use datepicker-options attribute instead');
});

it('should suppress warning for dateDisabled attribute usage', function() {
module(function($provide) {
$provide.value('uibDatepickerAttributeWarning', false);
});
inject(function(_$log_, _$rootScope_, _$compile_) {
$log = _$log_;
$scope = _$rootScope_.$new();
$compile = _$compile_;
});

$scope.locals = {
date: new Date(),
dateDisabled: false
};

spyOn($log, 'warn');
element = $compile('<uib-datepicker ng-model="locals.date" date-disabled="locals.dateDisabled"></uib-datepicker>')($scope);
$scope.$digest();

expect($log.warn).not.toHaveBeenCalled();
});

it('should log warning for datepickerMode attribute usage', function() {
inject(function(_$log_, _$rootScope_, _$compile_) {
$log = _$log_;
Expand Down Expand Up @@ -956,6 +1038,76 @@ describe('datepicker', function() {
expect($log.warn).not.toHaveBeenCalled();
});

it('should log warning for customClass attribute usage', function() {
inject(function(_$log_, _$rootScope_, _$compile_) {
$log = _$log_;
$scope = _$rootScope_.$new();
$compile = _$compile_;
});

$scope.date = new Date();

spyOn($log, 'warn');
element = $compile('<div><input ng-model="date" uib-datepicker-popup custom-class="true"></div>')($scope);
$scope.$digest();

expect($log.warn).toHaveBeenCalledWith('uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead');
});

it('should suppress warning for customClass attribute usage', function() {
module(function($provide) {
$provide.value('uibDatepickerPopupAttributeWarning', false);
});
inject(function(_$log_, _$rootScope_, _$compile_) {
$log = _$log_;
$scope = _$rootScope_.$new();
$compile = _$compile_;
});

$scope.date = new Date();

spyOn($log, 'warn');
element = $compile('<div><input ng-model="date" uib-datepicker-popup custom-class="true"></div>')($scope);
$scope.$digest();

expect($log.warn).not.toHaveBeenCalled();
});

it('should log warning for dateDisabled attribute usage', function() {
inject(function(_$log_, _$rootScope_, _$compile_) {
$log = _$log_;
$scope = _$rootScope_.$new();
$compile = _$compile_;
});

$scope.date = new Date();

spyOn($log, 'warn');
element = $compile('<div><input ng-model="date" uib-datepicker-popup date-disabled="true"></div>')($scope);
$scope.$digest();

expect($log.warn).toHaveBeenCalledWith('uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute instead');
});

it('should suppress warning for dateDisabled attribute usage', function() {
module(function($provide) {
$provide.value('uibDatepickerPopupAttributeWarning', false);
});
inject(function(_$log_, _$rootScope_, _$compile_) {
$log = _$log_;
$scope = _$rootScope_.$new();
$compile = _$compile_;
});

$scope.date = new Date();

spyOn($log, 'warn');
element = $compile('<div><input ng-model="date" uib-datepicker-popup date-disabled="true"></div>')($scope);
$scope.$digest();

expect($log.warn).not.toHaveBeenCalled();
});

it('should log warning for onOpenFocus attribute usage', function() {
inject(function(_$log_, _$rootScope_, _$compile_) {
$log = _$log_;
Expand Down Expand Up @@ -2879,51 +3031,55 @@ describe('datepicker', function() {

describe('date-disabled expression', function() {
beforeEach(function() {
$rootScope.dateDisabledHandler = jasmine.createSpy('dateDisabledHandler');
element = $compile('<uib-datepicker ng-model="date" date-disabled="dateDisabledHandler(date, mode)"></uib-datepicker>')($rootScope);
$rootScope.options = {
dateDisabled: jasmine.createSpy('dateDisabled')
};
element = $compile('<uib-datepicker ng-model="date" datepicker-options="options"></uib-datepicker>')($rootScope);
$rootScope.$digest();
});

it('executes the dateDisabled expression for each visible day plus one for validation', function() {
expect($rootScope.dateDisabledHandler.calls.count()).toEqual(42 + 1);
expect($rootScope.options.dateDisabled.calls.count()).toEqual(42 + 1);
});

it('executes the dateDisabled expression for each visible month plus one for validation', function() {
$rootScope.dateDisabledHandler.calls.reset();
$rootScope.options.dateDisabled.calls.reset();
clickTitleButton();
expect($rootScope.dateDisabledHandler.calls.count()).toEqual(12 + 1);
expect($rootScope.options.dateDisabled.calls.count()).toEqual(12 + 1);
});

it('executes the dateDisabled expression for each visible year plus one for validation', function() {
clickTitleButton();
$rootScope.dateDisabledHandler.calls.reset();
$rootScope.options.dateDisabled.calls.reset();
clickTitleButton();
expect($rootScope.dateDisabledHandler.calls.count()).toEqual(20 + 1);
expect($rootScope.options.dateDisabled.calls.count()).toEqual(20 + 1);
});
});

describe('custom-class expression', function() {
beforeEach(function() {
$rootScope.customClassHandler = jasmine.createSpy('customClassHandler');
element = $compile('<uib-datepicker ng-model="date" custom-class="customClassHandler(date, mode)"></uib-datepicker>')($rootScope);
$rootScope.options = {
customClass: jasmine.createSpy('customClass')
};
element = $compile('<uib-datepicker ng-model="date" datepicker-options="options"></uib-datepicker>')($rootScope);
$rootScope.$digest();
});

it('executes the customClass expression for each visible day plus one for validation', function() {
expect($rootScope.customClassHandler.calls.count()).toEqual(42);
expect($rootScope.options.customClass.calls.count()).toEqual(42);
});

it('executes the customClass expression for each visible month plus one for validation', function() {
$rootScope.customClassHandler.calls.reset();
$rootScope.options.customClass.calls.reset();
clickTitleButton();
expect($rootScope.customClassHandler.calls.count()).toEqual(12);
expect($rootScope.options.customClass.calls.count()).toEqual(12);
});

it('executes the customClass expression for each visible year plus one for validation', function() {
clickTitleButton();
$rootScope.customClassHandler.calls.reset();
$rootScope.options.customClass.calls.reset();
clickTitleButton();
expect($rootScope.customClassHandler.calls.count()).toEqual(20);
expect($rootScope.options.customClass.calls.count()).toEqual(20);
});
});

Expand Down Expand Up @@ -4654,13 +4810,6 @@ describe('datepicker', function() {
]);
});
});

it('should set dateDisabled on the inner datepicker', function() {
var wrapElement = $compile('<div><input ng-model="date" uib-datepicker-popup is-open="true" date-disabled="dateDisabledHandler(date, mode)"><div>')($rootScope);
$rootScope.$digest();
assignElements(wrapElement);
expect(dropdownEl.find('div').attr('date-disabled')).toBe('dateDisabled({ date: date, mode: mode })');
});
});

describe('gc', function() {
Expand Down

0 comments on commit d880aea

Please sign in to comment.