Input date and input time are commonly used for registration forms. If you need to set the values of Input type Date and Time using JavaScript for your website, read this article, we will show you the simplest ways to do it.
Set the values of input type Date and Time using JavaScript?
Before we start setting input date and time values, let’s quickly look at their concepts.
Input type date: generates input fields that allow the user to enter a date. Its value includes the day, month, and year but not the time.
Input type time: generates input fields that allow the user to enter a time (hours, minutes). Its value includes only the time, not the date.
Now, let’s set the values for them.
Using the value attribute
Any input tag has a value attribute, so we can use this attribute to set the value for the input Date and input Time.
First, we need to get the input Date and input Time tags. Then call the value attribute on each tag and set the value for them. We can either hard set a value or set the current time value using the Date()
constructor. Note that the format accepted in these two input tags must have a ‘0’ in front of numbers less than 10.
See the example below to understand better.
<main id="app"> <h1>Hello, this is LearnShareIT</h1> <form id="my-form"> <div> Date: <input type="date" id="date-input" /> </div> <div> Time: <input type="time" id="time-input" /> </div> </form> </main> <script type="module" src="script.js"></script>
// Get input Date and input Time const dateInput = document.getElementById('date-input'); const timeInput = document.getElementById('time-input'); // Get the current date let now = new Date(); let date = now.getDate(); let month = now.getMonth(); let year = now.getFullYear(); // Format dates and months < 10 if (date < 10) date = '0' + date; if (month < 10) month = '0' + month; // Get the current time let hour = now.getHours(); let min = now.getMinutes(); // Format hours and minutes < 10 if (hour < 10) hour = '0' + hour; if (min < 10) min = '0' + min; // Set value for input Date and input Time using the value attribute dateInput.value = `${year}-${month}-${date}`; // 'YYYY-MM-DD' timeInput.value = `${hour}:${min}`; // 'HH:MM'
Output:

Using the setAttribute()
function
You can read more about the syntax of setAttribute()
here before we start coding.
In addition to directly setting the value attribute of the input tag, we can also use the setAttribute()
function to indirectly set the value for the input Date and input Time. Just pass the string ‘value’ into the first argument and the date value or time value on the 2nd argument.
This time let’s gather the code to get the current date and format the date into a function for reuse. Then use setAttribute()
to set the value for the input Date and input Time.
// Get input Date and input Time const dateInput = document.getElementById('date-input'); const timeInput = document.getElementById('time-input'); // Generate a formatted date and time object. function createFormattedCurrentDatetime() { // Get the current date let now = new Date(); let date = now.getDate(); let month = now.getMonth(); let year = now.getFullYear(); // Format date and month < 10 if (date < 10) date = '0' + date; if (month < 10) month = '0' + month; // Get the current time let hour = now.getHours(); let min = now.getMinutes(); // Format hours and minutes < 10 if (hour < 10) hour = '0' + hour; if (min < 10) min = '0' + min; return { date: `${year}-${month}-${date}`, time: `${hour}:${min}` }; } // Set value for input Date and input Time using setAttribute() let date = createFormattedCurrentDatetime().date; dateInput.setAttribute('value', date); let time = createFormattedCurrentDatetime().time; timeInput.setAttribute('value', time);
Output:

Summary
Above, we have shown you two ways that are considered best practices to set the values of input type Date and Time using JavaScript. You don’t have to use both ways. Just choose the one that works best for you. If you have any questions, please comment below.
Have a nice day!
Maybe you are interested:
- Move the Cursor to an Input field using JavaScript
- How To Clear Input Fields After Submit Using JavaScript
- Clear Input fields after Submit using JavaScript

Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java