Set the current Date on an Input type="date" in JavaScript

avatar

Borislav Hadzhiev

Fri Jan 28 20222 min read

banner

Photo by Meiying Ng

Set the current Date on an Input type="date" in JavaScript #

To set the current date on an input type date:

  1. Select the input field.
  2. Use the value property to set the current date to the input field.
  3. Format the current date as YYYY-MM-DD.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <label for="start">Input type Date:</label> <input type="date" id="date" name="trip-start" /> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const dateInput = document.getElementById('date'); // ✅ Using the visitor's timezone dateInput.value = formatDate(); console.log(formatDate()); function padTo2Digits(num) { return num.toString().padStart(2, '0'); } function formatDate(date = new Date()) { return [ date.getFullYear(), padTo2Digits(date.getMonth() + 1), padTo2Digits(date.getDate()), ].join('-'); } // ✅ Using UTC (universal coordinated time) // dateInput.value = new Date().toISOString().split('T')[0]; // console.log(new Date().toISOString().split('T')[0]);

We selected the input type date element using the getElementById() method.

We can set the element's value via the value property.

When setting the element's value you have to format the date as YYYY-MM-DD.

We created a reusable function that formats a date as YYYY-MM-DD.

The function takes a Date object as parameter or uses the current date if one isn't provided.

We used the following 3 date-related methods in the function:

  • Date.getFullYear method - returns a four-digit number representing the year that corresponds to a date.

  • Date.getMonth - returns an integer between 0 (January) and 11 (December) and represents the month for a given date. Yes, unfortunately the getMonth method is off by 1.

  • Date.getDate - returns an integer between 1 and 31 representing the day of the month for a specific date.

The getMonth method returns a zero-based month index from 0 to 11, meaning January is 0 and December is 11.

Because the getMonth method is zero-based we added 1 to its return value.

The padTo2Digits function takes care of adding a leading zero if the values for the month or day of the month are a single digit (are less than 10).

The date input expects the date to be formatted as YYYY-MM-DD, so trying to set a date formatted as YYYY-M-D would not work.

If I load the page using the example above I can see that the current date is set on the input field.

date input set current date

The example above sets the date input's value to the current date using the visitor's timezone.

If you need to set the date input's value to the current date according to UTC, you can use the toISOString() method instead.

index.js
const dateInput = document.getElementById('date'); // ✅ Using UTC (universal coordinated time) dateInput.value = new Date().toISOString().split('T')[0]; console.log(new Date().toISOString().split('T')[0]);

The toISOString() method returns a string representing the given date in the ISO 8601 format - YYYY-MM-DDTHH:mm:ss.sssZ.

There might be a difference between the visitor's timezone and UTC.

If the visitor's timezone has an offset from UTC, the date from the two approaches above might be different.

For example, if the visitor's timezone is UTC+0500 (5 hours ahead of UTC), then from midnight until 05:00, they would get yesterday's date if the UTC (toISOString()) approach is used.
Use the search field on my Home Page to filter through my more than 1,000 articles.