使用 setdate 为 jQueryUI 日期选择器创建“<上一个”和“下一个 >”（日期）链接时出错答案

【问题标题】：Error creating a '< previous' and 'next >' (date) link for jQueryUI datepicker using setdate使用 setdate 为 jQueryUI 日期选择器创建“<上一个”和“下一个 >”（日期）链接时出错
【发布时间】：2009-10-31 00:27:18
【问题描述】：

我正在尝试将 " 和 "Next >" 链接附加到 jQueryUI 日期选择器控件。我的问题是它会正确添加 1 天，然后停止。它不会继续增加天数。（与上一个按钮相同）。因此，如果我输入 2009 年 10 月 30 日，它只会“下一个”到 2009 年 10 月 31 日，并且不会滚动到 11 月 1 日。有什么想法吗？这是我的简化代码：

相关的 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]);
    });
};

【问题讨论】：

你能用 refreshSchedule() 做什么更新问题吗？ HTML中似乎还应该有另一个输入按钮？你也可以更新一下吗？
为了简化问题，我将目标表 HTML 排除在上述示例之外。它只是一个标准表格，头部带有#calendarTitle id，主体带有#calendarTable id。此时间表的 HTML 表的其余部分由服务器端脚本创建。

标签： jquery jquery-ui datepicker

【解决方案1】：

正如文档所说的日期选择器 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;
});

【讨论】：

我在文档中看到了这一点，但我很惊讶它没有内置的递增/递减方法——就像我错过了一些东西一样。您的解决方案效果很好。和我想的有点不同。感谢您的仔细审查和回复！

【解决方案2】：

我最近也遇到了这个问题，需要稍微修改输出 - 这是我的 jsfiddle。请注意，像这样使用时单击按钮；

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

将刷新可能占用过多服务器资源的页面。为了防止这种情况，您可以使用

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

如果需要，您可以使用 AJAX 调用刷新其他相关功能/数据。

http://jsfiddle.net/uh26x030/1

【讨论】：