title: Setting current date for a date input type box in a modal
body: <p>On my page, I have a form that opens up in modal. It has a couple of fields and date is one of them. I want to set it as default to today's date. My modal can be seen below</p>
  
  <pre><code>    &lt;!--main modal--&gt;
    &lt;div class="modal fade" id="myModal" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
  
        &lt;!-- Modal content--&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header" style ="background-color: #38BFEF;"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
            &lt;h4 class="modal-title"&gt;&lt;center&gt;&lt;font color="white"&gt;New Food Delivery&lt;/font&gt;&lt;/center&gt;&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
  
   &lt;!---inside pop up content start--&gt;
    &lt;form&gt;
    &lt;center&gt;
      &lt;p&gt;
          &lt;label for="Delivery Number"&gt;Delivery Number:&lt;/label&gt;
          &lt;input type="text" name="delivery_number" id="delNumber" style="width:150px;" autofocus="autofocus"&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label for="Delivery Date"&gt;Delivery Date:&lt;/label&gt;
          &lt;input type="date" name="datepicker" style="margin-left:4%;width:150px;" id="datepicker"&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label for="Supplier"&gt;Supplier:&lt;/label&gt;
          &lt;input type="text" name="supplier" style="margin-left:10%;width:150px;" id="supplier"&gt;
      &lt;/p&gt;
       &lt;p&gt;
          &lt;label for="Supplier"&gt;Cost of Delivery:&lt;/label&gt;
          &lt;input type="text" name="cost" style="margin-left:1%;width:150px;" id="cost"&gt;
      &lt;/p&gt;
      &lt;/center&gt;
      &lt;center&gt;&lt;input type="button"  id="submit" class="btn btn-info btn-lg vbtn" value="Submit" onclick="submitDelivery()" data-toggle="modal" data-target="#confirmModal"&gt;&lt;/center&gt;
  &lt;/form&gt;
  
  
   &lt;!---inside pop up content end--&gt;
         &lt;/div&gt;
          &lt;div class="modal-footer" style ="background-color: #38BFEF;"&gt;
            &lt;input type="button" id="close" class="btn btn-default" data-dismiss="modal" value="Cancel"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Then I have a couple of javascript functions for different things, for example going through the inputs with enter presses, submitting the form when enter is pressed etc. </p>
  
  <p>One of the functions is to set the date for the #datepicker and it looks like this</p>
  
  <pre><code>$('#myModal').on('shown.bs.modal', function (e) {
       $('#delNumber').focus();
  
      var now = new Date();
      var day = ("0" + now.getDate()).slice(-2);
      var month = ("0" + (now.getMonth() + 1)).slice(-2);
  
      var today = (day)+"/"+(month)+"/"+ now.getFullYear();
      //alert(today);
      $('#datePicker').val(today);
  })
  </code></pre>
  
  <p>However, when I open the modal in Chrome, the box still says dd/mm/yyyy, seems like the function doesn't work properly?</p>
  
  <p>Another issue is that when I open the above code in Firefox, it doesn't seem to recognize the Date box as date input type.</p>