diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
index e949ead335..19403072d6 100644
--- a/src/datepicker/datepicker.js
+++ b/src/datepicker/datepicker.js
@@ -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: 3
})
.controller('UibDatepickerController', ['$scope', '$attrs', '$parse', '$interpolate', '$locale', '$log', 'dateFilter', 'uibDatepickerConfig', '$datepickerSuppressError', 'uibDatepickerAttributeWarning', 'uibDateParser',
@@ -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':
@@ -140,6 +142,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
} else {
self.activeDate = new Date();
}
+ case 'monthColumns':
}
});
} else {
@@ -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];
@@ -554,19 +557,18 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
};
}])
-.controller('UibMonthpickerController', ['$scope', '$element', 'dateFilter', function(scope, $element, dateFilter) {
+.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() {
+ this._refreshView = function () {
var months = new Array(12),
- year = this.activeDate.getFullYear(),
- date;
+ year = this.activeDate.getFullYear(),
+ date;
for (var i = 0; i < 12; i++) {
date = new Date(this.activeDate);
@@ -577,10 +579,11 @@ 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);
+ scope.columns = columns;
};
- this.compare = function(date1, date2) {
+ this.compare = function (date1, date2) {
var _date1 = new Date(date1.getFullYear(), date1.getMonth());
var _date2 = new Date(date2.getFullYear(), date2.getMonth());
_date1.setFullYear(date1.getFullYear());
@@ -588,19 +591,19 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
return _date1 - _date2;
};
- this.handleKeyDown = function(key, evt) {
+ this.handleKeyDown = function (key, evt) {
var date = this.activeDate.getMonth();
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);
+ var year = this.activeDate.getFullYear() + (key === 'pageup' ? -1 : 1);
this.activeDate.setFullYear(year);
} else if (key === 'home') {
date = 0;
@@ -717,10 +720,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();
}
};
})
diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
index 029dfb9230..41aba41135 100644
--- a/src/datepicker/test/datepicker.spec.js
+++ b/src/datepicker/test/datepicker.spec.js
@@ -2296,6 +2296,35 @@ describe('datepicker', function() {
});
});
+ describe('monthColumns', function() {
+ beforeEach(function() {
+ $rootScope.datepickerOptions = {
+ formatMonth: 'MMM',
+ monthColumns: 4
+ };
+ element = $compile('')($rootScope);
+ $rootScope.$digest();
+ });
+
+ afterEach(function() {
+ $rootScope.datepickerOptions = {
+ formatMonth: 'MMMM',
+ monthColumns: 3
+ };
+ });
+
+ it('changes the number of rows in `month` mode', function() {
+ clickTitleButton();
+
+ expect(getOptions()).toEqual([
+ ['Jan', 'Feb', 'Mar', 'Apr'],
+ ['May', 'Jun', 'Jul', 'Aug'],
+ ['Sep', 'Oct', 'Nov', 'Dec']
+ ]);
+ });
+ });
+
describe('showWeeks', function() {
beforeEach(function() {
$rootScope.datepickerOptions = {
diff --git a/template/datepicker/month.html b/template/datepicker/month.html
index 1aff9c8f14..0f5667f3f2 100644
--- a/template/datepicker/month.html
+++ b/template/datepicker/month.html
@@ -2,7 +2,7 @@
|
- |
+ |
|