title: Adding a date picker to my html
body: <p>I am trying to add a date picker to my nav bar... the text box pops up but the datepicker does not pop up. Please help me fix the date picker.
   html code :</p>
  
  <pre><code>    &lt;li&gt;&lt;a herf='#'&gt;Country&lt;/a&gt;
  
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a herf= "#"&gt;Brazil&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a herf= "#"&gt;Taiwan&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a herf="#payperiod"&gt;Pay Period&lt;/a&gt;
                       &lt;ul&gt;
                          &lt;li&gt;&lt;a herf= "#"&gt;Start Date &lt;input type='date' id="beginning"&gt;&lt;/a&gt;
                           &lt;script&gt;
                            $(function() {
                              $('#beginning').datepicker();
                            });
                           &lt;/script&gt;&lt;/li&gt; 
  
                           &lt;li&gt;&lt;a herf= "#"&gt;End Date &lt;input type='date' id='ending'&gt;&lt;/a&gt;
                           &lt;script&gt;
                            $(function() {
                              $('#ending').datepicker();
                            });
                           &lt;/script&gt;&lt;/li&gt; 
  
  
  
  
                       &lt;/ul&gt;
  </code></pre>
  
  <p>this is the js:</p>
  
  <pre><code>$(document).ready(function() {
  $("#beginning").datepicker();
  $("#ending").datepicker();
  });
  </code></pre>