diff --git a/js/bootstrap-datepicker.js b/js/bootstrap-datepicker.js index 711b3eb..1f0f45b 100644 --- a/js/bootstrap-datepicker.js +++ b/js/bootstrap-datepicker.js @@ -108,7 +108,8 @@ this.todayBtn = (options.todayBtn||this.element.data('date-today-btn')||false); this.todayHighlight = (options.todayHighlight||this.element.data('date-today-highlight')||false); - this.weekStart = ((options.weekStart||this.element.data('date-weekstart')||dates[this.language].weekStart||0) % 7); + this.calendarWeeks = !!options.calendarWeeks; + this.weekStart = ((options.weekStart||this.element.data('date-weekstart')||this.calendarWeeks||dates[this.language].weekStart||0) % 7); this.weekEnd = ((this.weekStart + 6) % 7); this.startDate = -Infinity; this.endDate = Infinity; @@ -339,6 +340,11 @@ fillDow: function(){ var dowCnt = this.weekStart, html = ''; + if(this.calendarWeeks){ + var cell = ' '; + html += cell; + this.picker.find('.datepicker-days thead tr:first-child').prepend(cell); + } while (dowCnt < this.weekStart + 7) { html += ''+dates[this.language].daysMin[(dowCnt++)%7]+''; } @@ -365,7 +371,7 @@ endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity, currentDate = this.date && this.date.valueOf(), today = new Date(); - this.picker.find('.datepicker-days thead th:eq(1)') + this.picker.find('.datepicker-days thead th.switch') .text(dates[this.language].months[month]+' '+year); this.picker.find('tfoot th.today') .text(dates[this.language].today) @@ -384,6 +390,13 @@ while(prevMonth.valueOf() < nextMonth) { if (prevMonth.getUTCDay() == this.weekStart) { html.push(''); + if(this.calendarWeeks){ + // from https://github.com/timrwood/moment/blob/master/moment.js#L128 + var a = new Date(prevMonth.getYear(), prevMonth.getMonth(), prevMonth.getDate() - prevMonth.getDay() + 5), + b = new Date(a.getFullYear(), 0, 4), + calWeek = ~~((a - b) / 864e5 / 7 + 1.5); + html.push(''+ calWeek +'') + } } clsName = ''; if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) { diff --git a/less/datepicker.less b/less/datepicker.less index a3aa31c..dbd4640 100644 --- a/less/datepicker.less +++ b/less/datepicker.less @@ -154,6 +154,19 @@ /*.dow { border-top: 1px solid #ddd !important; }*/ + + // Basic styling for calendar-week cells + .cw { + font-size: 10px; + width: 12px; + padding: 0 2px 0 5px; + } + thead tr:first-child th.cw { + cursor: default; + } + thead tr:first-child th.cw { + background-color: transparent; + } } .input-append, .input-prepend { diff --git a/tests/suites/calendar-weeks.js b/tests/suites/calendar-weeks.js new file mode 100644 index 0000000..8d987bf --- /dev/null +++ b/tests/suites/calendar-weeks.js @@ -0,0 +1,52 @@ +module('Calendar Weeks', { + setup: function(){ + this.input = $('') + .appendTo('#qunit-fixture') + .val('2013-01-14') + .datepicker({ + format: 'yyyy-mm-dd', + calendarWeeks: true + }) + .focus(); // Activate for visibility checks + this.dp = this.input.data('datepicker') + this.picker = this.dp.picker; + }, + teardown: function(){ + this.picker.remove(); + } +}); + +test('weekStart defaults to monday', function(){ + equal(this.dp.weekStart, 1, 'Week start defaults to monday'); +}); + +test('adds cw header column', function(){ + var target = this.picker.find('.datepicker-days thead th:first-child'); + ok(target.hasClass('cw'), 'First column heading is from cw column'); +}); + +test('adds calendar week cells to each day row', function(){ + var target = this.picker.find('.datepicker-days tbody tr'); + + expect(target.length); + target.each(function(i){ + var t = $(this).children().first(); + ok(t.hasClass('cw'), "First column is cw column"); + }); +}); + +test('displays correct calendar week', function(){ + var target = this.picker.find('.datepicker-days tbody tr'); + + expect(target.length); + target.each(function(i){ + var t = $(this).children().first(); + equal(t.text(), i+1, "Displays correct calendar weeks"); + }); +}); + +test('it prepends column to switcher thead row', function(){ + var target = this.picker.find('.datepicker-days thead tr:first-child'); + equal(target.children().length, 4, 'first row has 4 columns'); + ok(target.children().first().hasClass('cw'), 'cw column is prepended'); +}); \ No newline at end of file diff --git a/tests/tests.html b/tests/tests.html index d8d8541..bab4d9a 100644 --- a/tests/tests.html +++ b/tests/tests.html @@ -34,6 +34,7 @@ +

bootstrap-datepicker