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 @@ - +