Ошибка создания ссылки «<предыдущая» и «следующая>» (дата) для jQueryUI datepicker с использованием setdate

Question

Я пытаюсь прикрепить " и "Next>" ссылки на элемент управления DatePicker jQueryUI. Моя проблема в том, что он правильно добавит 1 день, но потом остановится. Это не будет продолжать добавлять дни. (то же самое с предыдущей кнопкой). Поэтому, если я введу 30.10.2009, он будет «следующим» после 31.10.2009 и не будет перенесен на 1 ноября. Есть идеи? Вот мой упрощенный код:

Соответствующий 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>

Соответствующий 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;
});

В противном случае корректно работает указатель даты jQueryUI.

Обновление за комментарий - функцию refreshCalendar () можно было бы назвать doSomething (); Это не имеет отношения к первоначальному вопросу о том, как увеличивать / уменьшать значение поля #datepicker. Тем не менее, вот код. Я мог бы сделать то же самое с $ ("# datepicker"). Change () слушателем и функцией обратного вызова для обновления таблицы / заголовка.

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

Как говорят в документах для указателя даты setDate позволяет вам указывать количество дней с сегодняшнего дня. Это означает, что $ (). Datepicker ('setDate', '-1'); Всегда равно текущей дате - 1 день, вы можете звонить 12 раз подряд, и это всегда будет совпадать (если вы не начнете в 23:59 в один день и не закончите в 12:01 следующего)

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

Я думаю, что вы хотите это:

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

Я тоже с этим недавно сталкивался, и мне нужно было немного изменить вывод - вот мой jsfiddle. Обратите внимание, что при нажатии кнопки при использовании, как это;

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

Обновит страницу, которая может использовать слишком много ресурсов сервера. Чтобы предотвратить это, вы можете использовать

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

и, если вам нужно, вы можете обновить другие связанные функции / данные, используя вызов AJAX.

http://jsfiddle.net/uh26x030/1