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:
Relevant 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>
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;
});
The jQueryUI datepicker works correctly otherwise.
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]);
});
};