title: Default date in data picker is set, but an empty date is returned
body: <p>The purpose of the date picker here is to allow the user to go this webpage with the current date already selected, but allow them to select other dates as well.</p>
  
  <p>This is the code for the script in the events.php page:</p>
  
  <pre><code>            $(function() {
                  $( "#calendar" ).datepicker({dateFormat: 'yy-mm-dd'}).datepicker("setDate", new Date());
              }); 
  </code></pre>
  
  <p>On the page that user sees the textbox is populated with the current date as it should be. However in the main-events.js file where I'm accessing the value of this, only when the user either selects the same date again or a different date does it have a value.</p>
  
  <pre><code>    date = $('#calendar').val();
      console.log("hi");
      console.log(date);
      $('#calendar').change(function(){
              date = $('#calendar').val();
              trafficChart.destroy();
              totalChart.destroy();
              createTrafficChart();
              createTotalChart();
              console.log("calendar change");
      });
  </code></pre>
  
  <p>In the console I can see that "hi" is printed out, but an empty line is printed out for the date. When the user selects another date it prints "hi" as well as the date as it should. </p>
  
  <p>Is there a reason why when the page initially loads that the date is empty until the user manually selects another date?</p>