title: Working with date picker: simple task
body: <p>Below is a fiddle example as a starting point:
  <a href="http://jsfiddle.net/1ezos4ho/8/" rel="nofollow">http://jsfiddle.net/1ezos4ho/8/</a></p>
  
  <p>Essentially I would want the followings to happen:</p>
  
  <ol>
  <li>The date selected to be dynamically be added as the value of the input, where it would be like <code>&lt;input type text value="date selected"....</code></li>
  </ol>
  
  <p>Update:</p>
  
  <pre><code>&lt;script&gt; 
  $(function() { // on load function, everything inside here will not run until the pagehas had time to load 
        $("#dpick").datepicker(); //date picker added here at its state its only able to grab the startDate not the end date not sure why
  
  $('.filter').click(function(){ 
  
                  document.getElementById("results").innerHTML = "&lt;div class='loading-indication'&gt;&lt;img src='ajax-loader.gif' /&gt; &amp;nbsp; Please wait... Loading New Courses...&lt;/div&gt;";
  
  var datastring = $('#testform').serialize(); // this will create key/value pairs to send to the phph page like `duration5=5` with a `&amp;` sepparating each key/value pair 
  $('#display-datastring').html(datastring); // this line is just so you can see the variable being created 
  $.ajax({ 
  url: 'fetch_pages.php', 
  type: 'post', 
  data: datastring, 
  success: function(res){ 
  
  $('#results').html(res); 
  } 
  }); 
  
  
  }); 
  
  }); 
  &lt;/script&gt; 
  </code></pre>
  
  <p>Below is the form:</p>
  
  <pre><code> &lt;form id="testform"&gt; 
  
              &lt;input type="text"  placeholder="Start" style="width: 40%;" name="dateStart" class="filter" id="dpick" &gt; 
                              &lt;label id="Paylbl0"&gt;To&lt;/label&gt;
  
               &lt;input type="text"  style="width: 40%;" placeholder="End" name="dateEnd" class="filter" id="dpick"&gt; 
  </code></pre>
  
  <p>problem is function start to run as soon as i hit the input when it should only be executed oncce the date has been selected. For some reason the date picker only comes in action with start date and not end date.</p>