创建 '< 时出错上一个'和'下一个>'使用 setdate 的 jQueryUI 日期选择器的(日期)链接 [英] Error creating a '< previous' and 'next >' (date) link for jQueryUI datepicker using setdate

问题描述

我正在尝试将 "< Previous" 和 "Next >" 链接附加到 jQueryUI 日期选择器控件.我的问题是它会适当地添加 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:

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() 函数可以命名为 doSomething();这与关于如何增加/减少 #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

我认为你想要的是:

// 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; 时出错上一个'和'下一个>'使用 setdate 的 jQueryUI 日期选择器的(日期)链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！