title: jQuery datepicker doesn't appear in Firefox
body: <p>I have an input form using FLAT UI KIT that MUST contain a datepicker, so I chose to use jQuery's widget. But when I run it in Chrome the datepicker shows up, whilet on Firefox it is shows as a simple text input.
  Here is my code:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;My test &amp;middot; stuff with datepicker&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;!-- Loading Bootstrap --&gt;
      &lt;link href="bootstrap/css/bootstrap.css" rel="stylesheet"&gt;
      &lt;link href="bootstrap/css/prettify.css" rel="stylesheet"&gt;
  
      &lt;!-- Loading Flat UI --&gt;
      &lt;link href="css/flat-ui.css" rel="stylesheet"&gt;
      &lt;link href="css/docs.css" rel="stylesheet"&gt;
  
      &lt;link rel="shortcut icon" href="images/favicon.ico"&gt;
      &lt;!--  my addition jQuery UI for datepicker --&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
  
      &lt;script src="js/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-ui-1.10.3.custom.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.ui.touch-punch.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap-select.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap-switch.js"&gt;&lt;/script&gt;
      &lt;script src="js/flatui-checkbox.js"&gt;&lt;/script&gt;
      &lt;script src="js/flatui-radio.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.tagsinput.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.placeholder.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap/js/google-code-prettify/prettify.js"&gt;&lt;/script&gt;
      &lt;script src="js/application.js"&gt;&lt;/script&gt;                
  
      &lt;style&gt;
             .containerx {
          background-color: #1abc9c;
          background-repeat: no-repeat;
          background-position: bottom right;
          background-attachment: scroll;
          }      
          .titluedit{
          margin: 0 0 0 0;
          font-size:14px;
          }
  
          .titlueditx{
          margin: 0 0 0 0;
          font-size:14px;
          color:red;
          }
  
          fieldset { margin: 0 0 10px 0; }
      &lt;/style&gt;
  
      &lt;script&gt;
      &lt;/script&gt;
  
      &lt;script&gt;
              $(document).ready(function(){
                  $(function() {
                      $( "#datepicker" ).datepicker();
                  });    
              });    
  
      &lt;/script&gt;    
  
    &lt;/head&gt;
    &lt;body&gt;
    &lt;img src="images/logo2.png" alt="logox" height="81" width="305"&gt; 
          &lt;h1 class="demo-panel-title" style="text-align:center; color:#d35400"&gt;XXXXXXXXX&lt;/h1&gt;
          &lt;h3 class="demo-panel-title" style="text-align:center; color:#1abc9c"&gt;New info&lt;/h3&gt;
  
         &lt;div class="container" style="width:900px; margin:0 auto;"&gt; 
  &lt;form action="save.php" method="post"&gt;
              &lt;div class="container" style="width:700px; margin:0 auto;"&gt; 
                      &lt;fieldset&gt;
                      &lt;p class="titlueditx"&gt;Name *:&lt;/p&gt;
                      &lt;input type="text" name="nume" value="" placeholder="Name" class="form-control" /&gt;
                      &lt;/fieldset&gt;
  
                      &lt;fieldset&gt;
                          &lt;p class="titlueditx"&gt;Medium time *:&lt;/p&gt;
                          &lt;input type="text" name="durata" value="" placeholder="minutes" class="form-control" /&gt;
                      &lt;/fieldset&gt;
  
                          &lt;p class="titlueditx"&gt;Start date  *:&lt;/p&gt;
                          &lt;input type="date" id="ui-datepicker" name="dataang" value="" class="form-control"/&gt;&lt;br&gt;
  
                      &lt;fieldset&gt;
                          &lt;p class="titlueditx"&gt;Some other stuff *:&lt;/p&gt;
                          &lt;input type="text" name="sefutzul" value="" placeholder="Other relevant stuff" class="form-control" /&gt;
                      &lt;/fieldset&gt;
  
              &lt;/div&gt;
  
    &lt;br&gt;&lt;br&gt;
      &lt;div class="container" style="width:700px; margin:0 auto;"&gt; 
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;      
                      &lt;input type="hidden" id="idhidfirma" name="idfirma" value="1" /&gt;       
                      &lt;input type="hidden" id="idhnumefirma" name="numefirma" value="xxxxx" /&gt;       
                      &lt;button type="submit" class="btn btn-hg btn-primary"&gt;        Save info      &lt;/button&gt;  
  
  &lt;/form&gt;
                  &lt;/td&gt;
          &lt;td&gt;  
              &lt;form action="mylist.php" method="post"&gt;                    
                  &lt;INPUT TYPE="hidden" NAME="idfirma" value="1"&gt;                     
                  &lt;INPUT TYPE="hidden" NAME="numefirma" value="xxxxx"&gt;             
                  &lt;button type="submit" class="btn btn-hg btn-danger"&gt;              Cancel            &lt;/button&gt;  
              &lt;/form&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
             &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;      
  
  
  
  &lt;/body&gt;&lt;/html&gt;                
  </code></pre>
  
  <p>What can I do to make it work in Firefox TOO?</p>
  
  <p>Also in Chrome how can I make the calendar to close onClick on a day? Right now the calendar stays shown until i click somewhere else on the screen.</p>