title: Datepicker set default date
body: <p>I am trying to set default date for Jquery datepicker on init. Here is my html:</p>
  
  <pre><code>var content = "";
              content = "&lt;table class=\"filter-table\"&gt;";
              content += "&lt;tr&gt;&lt;td&gt;&lt;label for='startDate'&gt;From &lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input name='startDate' id='startDate' class='date-picker' /&gt;&lt;/td&gt;&lt;/tr&gt;";
              content += "&lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;";  
              content += "&lt;tr&gt;&lt;td&gt;&lt;label for='endDate'&gt;To &lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input name='endDate' id='endDate' class='date-picker'  /&gt;&lt;/td&gt;&lt;/tr&gt;";             
  </code></pre>
  
  <p>And my JavaScript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function showdatepicker() {
          $('.date-picker').datepicker( {
              changeMonth: true,
              changeYear: true,
              changeDay: true,
              showButtonPanel: true,
              dateFormat: 'yy-mm-dd',
              onClose: function(dateText, inst) { 
                  var day = $("#ui-datepicker-div .ui-datepicker-day :selected").val();
                  var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                  var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                      $('#startDate').datepicker({defaultDate: -30});
                  $('#endDate').datepicker({defaultDate: new Date()});
              }
          });
      }       
      &lt;/script&gt;
  </code></pre>
  
  <p>What I am trying to do is set the date and show in the textbox when on load the page. The endDate should be current date whilst start date should be one month before. However, by using these codes, it does not display the date in textbox when first load.</p>
  
  <p>I wonder why is it so. Thanks in advance.</p>