Error creating a '< previous' and 'next >' (date) link for jQueryUI datepicker using setdate

Question

I'm trying to attach "< Previous" and "Next >" links to a jQueryUI datepicker control. My problem is that it will properly add 1 day, but then stop. It will not continue adding days. (same with the previous button). So if I enter 10/30/2009 it will only "next" to 10/31/2009, and won't roll over to November 1. Any ideas? Here is my simplified code:

Relevant HTML:

<form id="dateForm">
<a href="" id="previous">&laquo; Previous</a>
<input name="datepicker" type="text" value="10/30/2009" id="datepicker" />
<a href="" id="next">Next &raquo;</a>

Relevant Javascript / jQueryUI:

// Datepicker Init
$("#datepicker").datepicker({showOn: 'button', buttonText: 'Click to choose date'}).change(function () {
    refreshSchedule();
});

// Next Day Link
$('a#next').click(function () {
    $("#datepicker").datepicker('setDate', '+1');
    refreshSchedule();
    return false;
});

// Previous Day Link
$('a#previous').click(function () {
    $("#datepicker").datepicker('setDate', '-1');
    refreshSchedule();
    return false;
});

The jQueryUI datepicker works correctly otherwise.

Update per comment - The refreshCalendar() function could have been named doSomething(); It's irrelevant to the original question about how to increment/deincrement the #datepicker field. That said, here is the code. I could have done the same thing with a $("#datepicker").change() listener and a callback function to update the table/title.

// Get the latest calendar data from server. Update the calendar title & table
// returns a json array: data[0] = title, data[1] = html table contents
refreshCalendar = function () {
    var selectedDate = $("#datepicker").val();
    $.getJSON(serverUrl, {targetDate: selectedDate}, function (data) {
        $("#calendarTitle").html(data[0]);
        $("#calendarTable").html(data[1]);
    });
};

Answer 1

As the docs say for the datepicker setDate lets you provide a string of a number of days from today. So that means $().datepicker('setDate', '-1'); Always equals todays date - 1 day, you can call that 12 times in a row and it will always equal the same thing (unless you start at 11:59pm on one day and finish 12:01am the next)

http://jqueryui.com/demos/datepicker/#method-setDate

What I think you want is this:

// Next Day Link
$('a#next').click(function () {
    var $picker = $("#datepicker");
    var date=new Date($picker.datepicker('getDate'));
    date.setDate(date.getDate()+1);
    $picker.datepicker('setDate', date);
    return false;
});

// Previous Day Link
$('a#previous').click(function () {
    var $picker = $("#datepicker");
    var date=new Date($picker.datepicker('getDate'));
    date.setDate(date.getDate()-1);
    $picker.datepicker('setDate', date);
    return false;
});

Answer 2

I also came across this recently and needed to modify the output slightly - Here's my jsfiddle. Note that on click of button when used like this;

 <button class="prev-day">Previous</button>

Will refresh the page which may utilise too much server resource. To prevent that, you can use

  <button type="button" class="prev-day">Previous</button>

and if you need to, you could refresh other related function / data using AJAX call.

http://jsfiddle.net/uh26x030/1