Note that there are some explanatory texts on larger screens.

plurals
  1. POError creating a '< previous' and 'next >' (date) link for jQueryUI datepicker using setdate
    primarykey
    data
    text
    <p>I'm trying to attach <strong>"&lt; Previous"</strong> and <strong>"Next >"</strong> 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:</p> <p>Relevant HTML:</p> <pre><code>&lt;form id="dateForm"&gt; &lt;a href="" id="previous"&gt;&amp;laquo; Previous&lt;/a&gt; &lt;input name="datepicker" type="text" value="10/30/2009" id="datepicker" /&gt; &lt;a href="" id="next"&gt;Next &amp;raquo;&lt;/a&gt; </code></pre> <p></p> <p>Relevant Javascript / jQueryUI:</p> <pre><code>// 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; }); </code></pre> <p>The jQueryUI datepicker works correctly otherwise.</p> <p>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.</p> <pre><code>// Get the latest calendar data from server. Update the calendar title &amp; 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]); }); }; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload