adding day to a javascript date object does not work when moving to the next month

Question

Hello All, I'm having an issue when working with javascript date objects, specifically, when trying to add a day to a date object. The function I'm writing takes a start date and creates a list of the next seven days, used as the headers of a "week view" calendar app. When the week dates it's determining are within the same month, my function works as expected. When moving to the next month, things get wonky.

My date list generating function (NOTE: the .toHdr() method is a custom date method I've created, as is .clone()):

getWeekDates : function(date){                                  
    /*                                                          
     * Given a date object, returns a list of dates strings that
     * become the header of the week view                       
     */                                                         
    var _d = date.clone(), dates = [];                          
    for(var i=1; i<=7; i++){                                    
        dates.push(_d.toHdr());                                 
        _d.setDate(date.getDate() + i);                         
    }                                                                             
    return dates;                                               
}     

When the date passed to this function is something like "Monday October 11th" (as a date object), the function above returns :

["Monday - Oct. 11, 2010", "Tuesday - Oct. 12, 2010", "Wednesday - Oct. 13, 2010", "Thursday - Oct. 14, 2010", "Friday - Oct. 15, 2010", "Saturday - Oct. 16, 2010", "Sunday - Oct. 17, 2010"]

However, when passed a date like "Sunday October 31st", the list that is returned looks like:

["Sunday - Oct. 31, 2010", "Monday - Nov. 1, 2010", "Friday - Dec. 3, 2010", "Monday - Jan. 3, 2011", "Friday - Feb. 4, 2011", "Tuesday - Mar. 8, 2011", "Wednesday - Apr. 6, 2011"]

Obviously adding one day to at a time to a date object become problematic when moving to another month, I'm just not exactly sure how to get around it. Any ideas?

EDIT:

Date.prototype.toHdr = function(){
    /*
     * Convenience method for creating a formatted string that will be used in
     * all headers with a specific date.
     */
    var dayMapping = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    var monthMapping = ['Jan.','Feb.','Mar.','Apr.','May','June','July','Aug.','Sept.','Oct.','Nov.','Dec.'];
    return dayMapping[this.getDay()] + ' - ' + monthMapping[this.getMonth()] + ' ' + this.getDate() + ', ' + this.getFullYear();

};

Date.prototype.clone = function(){
    /*
     * Clone a date object, useful for creating a copy of a date, so the
     * original isn't modified.
     */
    return new Date(this.getTime());
}

Answer 1

Inside the loop you're using the supplied date as the reference point for every setDate():

_d.setDate(date.getDate() + i);

When date is the last day of October (31), and i is 1, this sets _d day-of-month to the 32nd - i.e. the 1st November. On the next iteration you set the day of month of _d to (31+2), but remember _d is now in November - so the date moves forward to 3rd December. In subsequent iterations your step size is increasing by an extra day each month, hence your result. Could you call the getter on _d instead? In that case instead of setting day-of-month to 32,33,34, etc. days, you would be setting to 32, then to 2, 3, and so on.