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">« Previous</a>
<input name="datepicker" type="text" value="10/30/2009" id="datepicker" />
<a href="" id="next">Next »</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()函数可以命名为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]);
});
};
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)