How to increment and decrement week?

Question

I have buttons for incrementing and decrementing weeks. I have to display the start date and end date of the current week. When I click increment button, start date and end date of the next week has to be displayed. If I again click next start dat and end date of the week after that has to be displayed. Similarly for decrement button.

var i = 0;
    var curr = new Date; // get current date
    var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
    var last = first + 6; // last day is the first day + 6
    $('#btnPrevWeek,#btnNextWeek').click(function () {

        if ($(this).is('#btnNext')) {
            first = first + 7;
            last = last + 7;

            var firstday = new Date(curr.setDate(first)).toUTCString();
            var lastday = new Date(curr.setDate(last)).toUTCString();

            var startDatePieces = firstday.split(/[\s,]+/);
            var endDatePieces = lastday.split(/[\s,]+/);

            var startDate = startDatePieces[2] + " " + startDatePieces[1] + " " + startDatePieces[3];
            var endDate = endDatePieces[2] + " " + endDatePieces[1] + " " + endDatePieces[3];
            $('#lblWeekStartDate').html(startDate);
            $('#lblWeekEndDate').html(endDate);
        }
        else {
            first = first - 7;
            last = last - 7;

            var firstday = new Date(curr.setDate(first)).toUTCString();
            var lastday = new Date(curr.setDate(last)).toUTCString();

            var startDatePieces = firstday.split(/[\s,]+/);
            var endDatePieces = lastday.split(/[\s,]+/);

            var startDate = startDatePieces[2] + " " + startDatePieces[1] + " " + startDatePieces[3];
            var endDate = endDatePieces[2] + " " + endDatePieces[1] + " " + endDatePieces[3];
            $('#lblWeekStartDate').html(startDate);
            $('#lblWeekEndDate').html(endDate);
        }
    })

I will be displaying the dates in this format - Sep 15 2013-Sep 21 2013 .

For the current month the code is working fine, after that it is not working properly. Plese help me to fix the issue.

Answer 1

Just use the Date value:

http://jsfiddle.net/k6jfR/

var week = 7 * 24 * 60 * 60 * 1000;

var curr = new Date();

var first = new Date();
    first.setDate(curr.getDate() - curr.getDay());

var last = new Date();
    last.setDate(first.getDate() + 6);

var parseDate = function(d){
  var datePieces = d.toUTCString().split(/[\s,]+/);
  return datePieces[2] + " " + datePieces[1] + " " + datePieces[3];
}
var printDates = function(){
  $('#lblWeekStartDate').html(parseDate(first));
  $('#lblWeekEndDate').html(parseDate(last));
}

printDates();

$('#btnNextWeek').click(function () {
  first = new Date(first.valueOf() + week);
  last = new Date(last.valueOf() + week);
  printDates();
});
$('#btnPrevWeek').click(function () {
  first = new Date(first.valueOf() - week);
  last = new Date(last.valueOf() - week);
  printDates();
});

Answer 2

The culprit is var curr = new Date;

It is messing up the day calculation as soon as you get out of month boundary i.e. 30+ days

If you take a new var curr = new Date; every time you calculate your date, the problem will be solved.

See working fiddle.