使用setdate为jQueryUI datepicker创建"<previous"和"next"(日期)链接时出错

Dan*_*sen 7 jquery jquery-ui datepicker

我正在尝试将"<Previous""Next>"链接附加到jQueryUI datepicker控件.我的问题是,它会正确添加1天,但然后停止.它不会继续增加几天.(与上一个按钮相同).因此,如果我进入2009年10月30日,它将只会"下一步"到10/31/2009,并且不会翻到11月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>
Run Code Online (Sandbox Code Playgroud)

相关的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;
});
Run Code Online (Sandbox Code Playgroud)

否则jQueryUI datepicker正常工作.

每条评论更新 - refreshCalendar()函数可以命名为doS​​omething(); 这与关于如何增加/减少#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]);
    });
};
Run Code Online (Sandbox Code Playgroud)

Pet*_*dIt 13

正如文档所说,对于datepicker,setDate允许您提供从今天开始的一段时间的字符串.这意味着$().datepicker('setDate',' - 1'); 总是等于今天的日期 - 1天,你可以连续12次打电话,它总是相同的(除非你在一天的晚上11: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;
});
Run Code Online (Sandbox Code Playgroud)