title: onclick show date field and on select date hide date field
body: <p>There is a date displaying as plain text. when I click on change button datepicker should appear below and when I select some date, the date picker should be hidden. and the date in the plane text should be changed.</p>
  
  <pre><code>&lt;span id="display-date"&gt; &lt;?php  echo $sdate; ?&gt;&lt;/span&gt;
  &lt;span id="d1" onClick="showdate()"&gt; change &lt;/span&gt;
  &lt;div  id="datepicker"&gt;&lt;/div&gt;  
  
   &lt;script&gt;
    $(function() {
    $( "#datepicker" ).datepicker();
    });
   &lt;/script&gt;
  </code></pre>
  
  <p>This is what all I have. 
  Initially (on page load), The div with id="datepicker" should be hidden.
  When I click on 'change' with id="d1", div with id="datepicker" should be shown.
  and when I select a date, I should be again hidden and $sdate variable should take that value. So the content in span with id="display-date" should be changed.</p>