In this tutorial I shall show you, how to set current date in input type date in html.
Step 1 – Create an html basic document
In the above screenshot you can see I have created the basic structure of the html document.
Now let’s create an input field that takes data only as value.
Step 2 – Create date type input field
In the above screenshot you will see I have added an input that has a type of date. And also I have given the name “dateInput” to this field. So that we could access this input field via its name when we set the current date using javascript.
Step 3 – Set current date to input field using javaScript
In the above screenshot you will see I have added a javascript code in our document. This javascript code is highlighted in white bordered rectangle. And inside this script I have used the querySelector method of dom to get the input with its “name” attribute. And in the yellow outlined rectangle I have highlighted the date which is assigned to its “valueAsDate” property. This will automatically get the current date and assign it to our date type input field.
Now let’s render it to our web browser to see the changes.
In the above screenshot you will see both changes before setting date and after setting current date.
We have successfully set the current date to our date type input field.
You may also like:
- How to call javascript function on button click in html
- how to select multiple options from a drop down list in html