title: How to make a clickable datepicker glyphicon-calender icon to work properly?
body: <p>Here are the code for enabling datepicket to work in firefox</p>
  
  <pre><code>&lt;script src="js/vendor/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="js/vendor/modernizr-custom.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
     var datefield=document.createElement("input");
      datefield.setAttribute("type", "date");
      if (datefield.type!=="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
       document.write('&lt;link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/dot-luv/jquery-ui.css " rel="stylesheet" type="text/css" /&gt;\n');
       document.write('&lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;\/script&gt;\n');
  
   }       
  &lt;/script&gt;
  
  &lt;script&gt;
      $(function(){           
          if (!Modernizr.inputtypes.date) { //if browser doesn't support input type="date", initialize date picker widget:
          // If not native HTML5 support, fallback to jQuery datePicker
              $('input[type=date]').datepicker({
                  // Consistent format with the HTML5 picker
                      dateFormat : 'dd-mm-yy'
  
                  },
                  // Localization
                  $.datepicker.regional['it']
              );
          }
      });
  &lt;/script&gt; 
  </code></pre>
  
  <p>Below are the html code</p>
  
  <pre><code>    &lt;div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"&gt;
         &lt;label for="inputDate"&gt;Date of Birth: &lt;/label&gt;
            &lt;div class="input-group datetime"&gt;
                &lt;input type="date" id='datefield' name="date" placeholder="DD/MM/YYYY" class="form-control" required/&gt;
                    &lt;span class="input-group-addon"&gt;
                          &lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;
                     &lt;/span&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <ul>
  <li>What I want is when I click on the glyphicon icon/button, that the calendar also appear so that I can choose a date to input into the same field just like the input type=date. </li>
  </ul>