title: DatePicker clear functionality
body: <p>I have a field with a date picker (jQuery) in jsp page. </p>
  
  <p><em>sample</em> (DatePicker)</p>
  
  <p><a href="http://jqueryui.com/demos/datepicker/#icon-trigger" rel="nofollow">http://jqueryui.com/demos/datepicker/#icon-trigger</a></p>
  
  <p>Page also has a "clear" button functionality, which clears all text fields on a page and the text inserted in those fields including the date chosen from the datepicker. </p>
  
  <p><strong>clear button code</strong></p>
  
  <pre><code>&lt;input type="button" name="buttonclear" id="buttonclear" class="buttonstyle_mid" value="Clear"
    onclick="javascript:clearData();" /&gt;
  </code></pre>
  
  <p><strong>javascript clearData() Code (for Date Field)</strong></p>
  
  <pre><code>document.getElementById("DateId").value = "";
  </code></pre>
  
  <p><strong>Date field Code</strong></p>
  
  <pre><code>&lt;form:input id="DateId" path="date" class="dateInput" size="11" maxlength="10" readonly="true" /&gt;
  </code></pre>
  
  <p><strong>jQuery DatePicker Code</strong></p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
          jQuery(function($) {
              $('.dateInput').datePicker();
              });
              $('#DateId').datePicker({
                  startDate : '01/01/1970',
                  endDate : (new Date()).asString()
              });     
      $('#DateId').bind('dpClosed', function(e, selectedDates) {
                  var d = selectedDates[0];
                  if (d) {
                      d = new Date(d);
                      $('#DateId1').dpSetStartDate(d.addDays(1).asString());
                  }
              });
              $('#DateId1').bind('dpClosed', function(e, selectedDates) {
                  var d = selectedDates[0];
                  if (d) {
                      d = new Date(d);
                      $('#DateId').dpSetEndDate(d.addDays(-1).asString());
                  }
              });
   &lt;/script&gt;
  </code></pre>
  
  <p>My code has a major shortcoming. If I select <strong>1st of august, 2011</strong> from the date picker and click on "clear" button. The date field gets cleared but I can't choose the same date again (i.e <strong>1st of august, 2011</strong>). </p>
  
  <p>Clear button only clears the value inside the field, but It does not clear the date in the underlying DatePicker</p>
  
  <p>I have googled a lot on this issue, but couldn't find a proper solution on this issue. Any help would really be appreciated. </p>
  
  <p>Thanks</p>