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

feat(datepicker): add monthColumns attribute #5650

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

feat(datepicker): add monthColumns attribute #5650

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e26ca6c
feat(datepicker): add monthColumns attribute
Mar 18, 2016
12b54be
fixed spacing and newLine issues
Mar 18, 2016
20ec3d4
changed the order of datePicker options
Mar 18, 2016
1c4ed5c
changed the default monthColumns back to 3
Mar 18, 2016
a2b1cb7
had to chage test so the calendar days options pass for the current m…
Mar 18, 2016
e2fca31
removed previous change
Mar 18, 2016
6582816
updated test to match other options
Mar 18, 2016
fdf3a3d
added unique test language
Mar 18, 2016
6629f77
made sure that showWeeks is enabled for test
Mar 18, 2016
27a14e9
remove showWeeks = true as this is default setting
Mar 18, 2016
457ea16
chnged monthColumns test order
Mar 18, 2016
f7ea3fe
removed datepickeroptions after test
Mar 21, 2016
d83e67c
changed columns to monthColumns to avoid collsion
Mar 21, 2016
2786691
fixed title span
Mar 21, 2016
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
29 changes: 16 additions & 13 deletions src/datepicker/datepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
shortcutPropagation: false,
showWeeks: true,
yearColumns: 5,
yearRows: 4
yearRows: 4,
monthColumns: 4
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Default number it seems to replace is 3 - this is probably what is breaking the unit tests.

})

.controller('UibDatepickerController', ['$scope', '$attrs', '$parse', '$interpolate', '$locale', '$log', 'dateFilter', 'uibDatepickerConfig', '$datepickerSuppressError', 'uibDatepickerAttributeWarning', 'uibDateParser',
Expand Down Expand Up @@ -53,7 +54,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
'shortcutPropagation',
'startingDay',
'yearColumns',
'yearRows'
'yearRows',
'monthColumns'
].forEach(function(key) {
switch (key) {
case 'customClass':
Expand Down Expand Up @@ -140,6 +142,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
} else {
self.activeDate = new Date();
}
case 'monthColumns':
}
});
} else {
Expand All @@ -153,7 +156,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
});

// Evaled configuration attributes
angular.forEach(['showWeeks', 'yearRows', 'yearColumns', 'shortcutPropagation'], function(key) {
angular.forEach(['showWeeks', 'yearRows', 'yearColumns', 'shortcutPropagation', 'monthColumns'], function(key) {
self[key] = angular.isDefined($attrs[key]) ?
$scope.$parent.$eval($attrs[key]) : datepickerConfig[key];

Expand Down Expand Up @@ -557,10 +560,9 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
.controller('UibMonthpickerController', ['$scope', '$element', 'dateFilter', function(scope, $element, dateFilter) {
this.step = { years: 1 };
this.element = $element;

this.init = function(ctrl) {
angular.extend(ctrl, this);
ctrl.refreshView();

this.monthpickerInit = function() {
columns = this.monthColumns;
};

this._refreshView = function() {
Expand All @@ -577,7 +579,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
}

scope.title = dateFilter(this.activeDate, this.formatMonthTitle);
scope.rows = this.split(months, 3);
scope.rows = this.split(months, columns);
};

this.compare = function(date1, date2) {
Expand All @@ -594,11 +596,11 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
if (key === 'left') {
date = date - 1;
} else if (key === 'up') {
date = date - 3;
date = date - columns;
} else if (key === 'right') {
date = date + 1;
} else if (key === 'down') {
date = date + 3;
date = date + columns;
} else if (key === 'pageup' || key === 'pagedown') {
var year = this.activeDate.getFullYear() + (key === 'pageup' ? - 1 : 1);
this.activeDate.setFullYear(year);
Expand Down Expand Up @@ -717,10 +719,11 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
require: ['^uibDatepicker', 'uibMonthpicker'],
controller: 'UibMonthpickerController',
link: function(scope, element, attrs, ctrls) {
var datepickerCtrl = ctrls[0],
monthpickerCtrl = ctrls[1];
var ctrl = ctrls[0];
angular.extend(ctrl, ctrls[1]);
ctrl.monthpickerInit();

monthpickerCtrl.init(datepickerCtrl);
ctrl.refreshView();
}
};
})
Expand Down
22 changes: 22 additions & 0 deletions src/datepicker/test/datepicker.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2560,6 +2560,28 @@ describe('datepicker', function() {
});
});

describe('attribute `monthColumns`', function() {
beforeEach(function() {
$rootScope.datepickerOptions = {
formatMonth: 'MMM',
monthColumns: 4
};
element = $compile('<uib-datepicker ng-model="date"' +
'datepicker-options="datepickerOptions"></uib-datepicker>')($rootScope);
$rootScope.$digest();
});

it('changes the title & months format in `month` mode', function() {
clickTitleButton();

expect(getOptions()).toEqual([
['Jan', 'Feb', 'Mar', 'Apr'],
['May', 'Jun', 'Jul', 'Aug'],
['Sep', 'Oct', 'Nov', 'Dec']
]);
});
});

describe('attribute `starting-day`', function() {
beforeEach(function() {
$rootScope.startingDay = 1;
Expand Down
2 changes: 1 addition & 1 deletion template/datepicker/month.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<thead>
<tr>
<th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
<th><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th>
<th colspan="{{::(columns - 3) + 1}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th>
<th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
</tr>
</thead>
Expand Down