HTML input date field, how to set default value to today's date?

Question

I'm slightly confused as to why my JS script isn't working, I have set it up to populate the date field to today's date, but the HTML date picker is still showing dd/mm/yyyy by default.

my HTML is:

<div class="col">
        <label for="date">Date</label>
        <input type="date" onload="getDate()" class="form-control" id="date" name="date">
</div>

my JS is:

function getDate(){
var today = new Date();

document.getElementById("date").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);

}

function getDate(){
var today = new Date();

document.getElementById("date").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);

}

 <div class="col">
           <label for="date">Date</label>
           <input type="date" onload="getDate()" class="form-control" id="date" name="date">
 </div>

Answer 1

For input elements, the onload attribute is only supported when <input type="image">

Tip: You use DOMContentLoaded for setting the default value

<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        document.getElementById("date").valueAsDate = new Date();
    });
</script>

Reference: https://www.w3schools.com/tags/att_onload.asp

Answer 2

I had some problems with that as well. I arrived at:

document.getElementById('mydate').value = new Date().toISOString().substring(0, 10);