Question

我正在尝试将“＆lt; Previous”和“Next＆gt;”链接到jQueryUI datepicker控件。我的问题是，它会正确添加1天，但然后停止。它不会继续增加几天。（与上一个按钮相同）。因此，如果我进入2009年10月30日，它将仅“下一步”到10/31/2009，并且不会翻到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 datepicker否则正常工作。

每条评论更新 - 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

正如文档对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;
});

Answer 2

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

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

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

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

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

http://jsfiddle.net/uh26x030/1

创建'＆lt;时出错上一个'和'下一个＆gt;' （date）使用setdate链接jQueryUI datepicker

2 个答案: