Error al crear un '< anterior 'y' siguiente > ' (fecha) enlace para jQueryUI datepicker usando setdate

Question

Estoy intentando adjuntar " < Enlaces anteriores " y " Siguiente > " a un control jQueryUI datepicker. Mi problema es que agregará correctamente 1 día, pero luego se detendrá. No continuará agregando días. (Lo mismo con el botón anterior). Entonces, si ingreso el 30/10/2009, solo aparecerá "siguiente" al 31/10/2009, y no se transferirá al 1 de noviembre. ¿Alguna idea? Aquí está mi código simplificado:

HTML relevante:

<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>

Javascript / jQueryUI relevante:

// 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;
});

El jQueryUI datepicker funciona correctamente de lo contrario.

Actualización por comentario: la función refreshCalendar () podría haberse denominado doSomething (); Es irrelevante para la pregunta original sobre cómo incrementar / reducir el campo #datepicker. Dicho esto, aquí está el código. Podría haber hecho lo mismo con un oyente $ (" # datepicker "). Change () y una función de devolución de llamada para actualizar la tabla / título.

// 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

Como dicen los documentos para datepicker, setDate le permite proporcionar una cadena de varios días a partir de hoy. Entonces eso significa $ (). Datepicker ('setDate', '-1'); Siempre es igual a la fecha de hoy: 1 día, puede llamarlo 12 veces seguidas y siempre será igual (a menos que comience a las 11:59 p. M. Un día y termine a las 12:01 a. M. Del siguiente)

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

Lo que creo que quieres es esto:

// 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

También me encontré con esto recientemente y necesitaba modificar ligeramente la salida. Aquí está mi jsfiddle. Tenga en cuenta que al hacer clic en el botón cuando se usa así;

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

Actualizará la página que puede utilizar demasiados recursos del servidor. Para evitar eso, puede usar

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

y si lo necesita, puede actualizar otras funciones / datos relacionados utilizando la llamada AJAX.

http://jsfiddle.net/uh26x030/1