Change month/year correctly when clicking days before start

or after end if current month
component · Sep 20, 2012 · 285b004 · 285b004
1 parent 4baa202
commit 285b004
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 18 deletions.
diff --git a/lib/days.js b/lib/days.js
@@ -78,8 +78,11 @@ function Days() {
   this.body.on('click', 'a', function(e){
     var el = o(e.target);
     var day = parseInt(el.text(), 10);
-    var month = el.data('month');
+    var data = el.data('month').split('-');
+    var year = data[0];
+    var month = data[1];
     var date = new Date;
+    date.setYear(year);
     date.setMonth(month);
     date.setDate(day);
     self.select(date);
@@ -178,11 +181,12 @@ Days.prototype.renderDays = function(date){
  * @api private
  */
 
-Days.prototype.cellsBefore = function(n, month){
+Days.prototype.cellsBefore = function(n, month, year){
   var cells = [];
-  var prev = clamp(month);
+  if (month == 0) --year;
+  var prev = clamp(month - 1);
   var before = daysInMonth(prev);
-  while (n--) cells.push(prevMonthDay(prev, before--));
+  while (n--) cells.push(prevMonthDay(year, prev, before--));
   return cells.reverse();
 };
 
@@ -195,11 +199,12 @@ Days.prototype.cellsBefore = function(n, month){
  * @api private
  */
 
-Days.prototype.cellsAfter = function(n, month){
+Days.prototype.cellsAfter = function(n, month, year){
   var cells = [];
   var day = 0;
-  var next = clamp(month);
+  if (month == 11) ++year;
-  while (n--) cells.push(nextMonthDay(next, ++day));
+  var next = clamp(month + 1);
+  while (n--) cells.push(nextMonthDay(year, next, ++day));
   return cells;
 };
 
@@ -234,20 +239,20 @@ Days.prototype.rowsFor = function(date){
   var cells = [];
 
   // cells before
-  cells = cells.concat(this.cellsBefore(before, month));
+  cells = cells.concat(this.cellsBefore(before, month, year));
 
   // current cells 
   for (var i = 0; i < total; ++i) {
     var day = i + 1;
     if (day == selectedDay && month == selectedMonth && year == selectedYear) {
-      cells.push('<td class=selected><a href="#" data-month=' + month + '>' + day + '</a></td>');
+      cells.push('<td class=selected><a href="#" data-month=' + year+'-'+month + '>' + day + '</a></td>');
     } else {
-      cells.push('<td><a href="#" data-month=' + month + '>' + day + '</a></td>');
+      cells.push('<td><a href="#" data-month=' + year+'-'+month + '>' + day + '</a></td>');
     }
   }
 
   // after cells
-  cells = cells.concat(this.cellsAfter(after, month));
+  cells = cells.concat(this.cellsAfter(after, month, year));
 
   return inGroupsOf(cells, 7);
 };
@@ -256,15 +261,15 @@ Days.prototype.rowsFor = function(date){
  * Prev month day template.
  */
 
-function prevMonthDay(prev, day) {
+function prevMonthDay(year, prev, day) {
-  return '<td><a href="#" data-month=' + prev + ' class=prev-day>' + day + '</a></td>';
+  return '<td><a href="#" data-month=' + year+'-'+prev + ' class=prev-day>' + day + '</a></td>';
 }
 
 /**
  * Next month day template.
  */
 
-function nextMonthDay(next, day) {
+function nextMonthDay(year, next, day) {
-  return '<td><a href="#" data-month=' + next + ' class=next-day>' + day + '</a></td>';
+  return '<td><a href="#" data-month=' + year+'-'+next + ' class=next-day>' + day + '</a></td>';
 }
 
diff --git a/test/index.html b/test/index.html
@@ -31,9 +31,9 @@ <h1>Calendar</h1>
           date.getDate(),
           date.getMonth(),
           date.getFullYear());
-
+        var newDate = new Date(date);
-        date.setMonth(date.getMonth() + 1);
+        newDate.setMonth(date.getMonth() + 1);
-        two.select(date);
+        two.select(newDate);
       });
 
       one.el.appendTo('body');