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

    <!--main modal-->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style ="background-color: #38BFEF;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><center><font color="white">New Food Delivery</font></center></h4>
        </div>
        <div class="modal-body">

 <!---inside pop up content start-->
  <form>
  <center>
    <p>
        <label for="Delivery Number">Delivery Number:</label>
        <input type="text" name="delivery_number" id="delNumber" style="width:150px;" autofocus="autofocus">
    </p>
    <p>
        <label for="Delivery Date">Delivery Date:</label>
        <input type="date" name="datepicker" style="margin-left:4%;width:150px;" id="datepicker">
    </p>
    <p>
        <label for="Supplier">Supplier:</label>
        <input type="text" name="supplier" style="margin-left:10%;width:150px;" id="supplier">
    </p>
     <p>
        <label for="Supplier">Cost of Delivery:</label>
        <input type="text" name="cost" style="margin-left:1%;width:150px;" id="cost">
    </p>
    </center>
    <center><input type="button"  id="submit" class="btn btn-info btn-lg vbtn" value="Submit" onclick="submitDelivery()" data-toggle="modal" data-target="#confirmModal"></center>
</form>


 <!---inside pop up content end-->
       </div>
        <div class="modal-footer" style ="background-color: #38BFEF;">
          <input type="button" id="close" class="btn btn-default" data-dismiss="modal" value="Cancel">
        </div>
      </div>

    </div>
    </div>

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.

One of the functions is to set the date for the #datepicker and it looks like this

$('#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);
})

However, when I open the modal in Chrome, the box still says dd/mm/yyyy, seems like the function doesn't work properly?

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.

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

    <!--main modal-->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style ="background-color: #38BFEF;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><center><font color="white">New Food Delivery</font></center></h4>
        </div>
        <div class="modal-body">

 <!---inside pop up content start-->
  <form>
  <center>
    <p>
        <label for="Delivery Number">Delivery Number:</label>
        <input type="text" name="delivery_number" id="delNumber" style="width:150px;" autofocus="autofocus">
    </p>
    <p>
        <label for="Delivery Date">Delivery Date:</label>
        <input type="date" name="datepicker" style="margin-left:4%;width:150px;" id="datepicker">
    </p>
    <p>
        <label for="Supplier">Supplier:</label>
        <input type="text" name="supplier" style="margin-left:10%;width:150px;" id="supplier">
    </p>
     <p>
        <label for="Supplier">Cost of Delivery:</label>
        <input type="text" name="cost" style="margin-left:1%;width:150px;" id="cost">
    </p>
    </center>
    <center><input type="button"  id="submit" class="btn btn-info btn-lg vbtn" value="Submit" onclick="submitDelivery()" data-toggle="modal" data-target="#confirmModal"></center>
</form>


 <!---inside pop up content end-->
       </div>
        <div class="modal-footer" style ="background-color: #38BFEF;">
          <input type="button" id="close" class="btn btn-default" data-dismiss="modal" value="Cancel">
        </div>
      </div>

    </div>
    </div>

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.

One of the functions is to set the date for the #datepicker and it looks like this

$('#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);
})

However, when I open the modal in Chrome, the box still says dd/mm/yyyy, seems like the function doesn't work properly?

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.

• javascript
• jquery
• html
• bootstrap-modal

2 Answers 2

In form you have id as datepicker and you are trying to access datePicker (Notice the capital P)using jquery.

Instead of using DD/MM/YYYY you need to use format YYYY-MM-DD

So resulting string will be:

 var today = (now.getFullYear() + '-' + month + '-' + day);
 $('#datepicker').val(today);

Here is working example: https://jsfiddle/panamaprophet/2Lt2q3ga/