创建“<上一个'和'下一个>' （日期）链接jQueryUI datepicker使用setdate [英] Error creating a '< previous' and 'next >' (date) link for jQueryUI datepicker using setdate

问题描述

我正在尝试将<上一个和下一个>链接附加到jQueryUI datepicker控件。我的问题是它会正确添加1天，但是停止。它不会继续添加日子。 （与上一个按钮相同）。所以如果我进入10/30/2009它将只会在下一个到10/31/2009，并不会滚动到11月1日。任何想法？以下是我的简化代码：

I'm trying to attach "< Previous" and "Next >" links to a jQueryUI datepicker control. My problem is that it will properly add 1 day, but then stop. It will not continue adding days. (same with the previous button). So if I enter 10/30/2009 it will only "next" to 10/31/2009, and won't roll over to November 1. Any ideas? Here is my simplified code:

相关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： / p>

Relevant 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日期戳工作正常。

The jQueryUI datepicker works correctly otherwise.

每个注释的更新 - refreshCalendar（）函数可能被命名为doS​​omething（）;这与关于如何增加/减少#datepicker字段的原始问题无关。也就是说，这里是代码。我可以用$（＃datepicker）。change（）监听器和一个回调函数来更新表/标题来完成同样的事情。

Update per comment - The refreshCalendar() function could have been named doSomething(); It's irrelevant to the original question about how to increment/deincrement the #datepicker field. That said, here is the code. I could have done the same thing with a $("#datepicker").change() listener and a callback function to update the table/title.

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

推荐答案

正如文档对于datepicker setDate所说从今天起的几天的字符串。所以这意味着$（）。datepicker（'setDate'，'-1'）;始终等于今天的日期 - 1天，您可以连续打电话12次，总是相同的事情（除非您在一天的下午11:59开始，下一个12:01上午完成）

As the docs say for the datepicker setDate lets you provide a string of a number of days from today. So that means $().datepicker('setDate', '-1'); Always equals todays date - 1 day, you can call that 12 times in a row and it will always equal the same thing (unless you start at 11:59pm on one day and finish 12:01am the next)

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

我想你想要的是这样的：

What I think you want is this:

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

这篇关于创建“&lt;上一个'和'下一个&gt;' （日期）链接jQueryUI datepicker使用setdate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！