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

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

To set the current date on an input type date:

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

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <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>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
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]);

The code for this article is available on GitHub

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 a 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.

# Set the current Date on an Input type="date" according to UTC

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

index.js

Copied!
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 code for this article is available on GitHub

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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

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