Skip to main content

How to Set the Current Date on an Input type="date" in JavaScript

A common task in web forms is to pre-populate a date input field with the current date. To do this with JavaScript, you must format a Date object into the specific YYYY-MM-DD string format that the <input type="date"> element requires.

This guide will demonstrate the correct way to format the current date for a date input. We will cover the standard method for getting the date in the user's local timezone and the alternative method for getting the date in UTC.

The Core Problem: The YYYY-MM-DD Format Requirement​

An <input type="date"> element has a value property that only accepts a string in the ISO 8601 format for dates: YYYY-MM-DD.

Problem: you cannot assign a Date object directly to the value property. It must be a correctly formatted string.

let dateInput = document.getElementById('my-date-input');
let now = new Date();

// ⛔️ This will NOT work. The Date object is not in the correct format.
dateInput.value = now;
console.log(dateInput.value);

// ⛔️ This will also NOT work. The format is wrong.
dateInput.value = now.toLocaleDateString('en-US');  // "10/25/2025"
console.log(dateInput.value);
note

You must manually construct the YYYY-MM-DD string.

This is the most common requirement: you want to set the input to whatever "today" is for the user in their current timezone.

Solution: this involves getting the year, month, and day from a Date object and carefully assembling the string with leading zeros.

<input type="date" id="start-date">
function getFormattedDate(date) {
  let year = date.getFullYear();
  
  // getMonth() is zero-based, so we add 1
  let month = (date.getMonth() + 1).toString().padStart(2, '0');
  
  let day = date.getDate().toString().padStart(2, '0');
  
  return `${year}-${month}-${day}`;
}

let dateInput = document.getElementById('start-date');

// Set the value to today's date in the user's local timezone
dateInput.value = getFormattedDate(new Date());

Solution 2: Formatting the UTC Date​

If your application logic requires the date to be based on Coordinated Universal Time (UTC) instead of the user's local time, you can use the toISOString() method as a shortcut.

Solution: the toISOString() method returns a string in the format YYYY-MM-DDTHH:mm:ss.sssZ. The date part is exactly what we need.

let dateInput = document.getElementById('start-date');

// 1. Get the ISO string (e.g., "2025-10-25T15:30:00.000Z")
let isoString = new Date().toISOString();

// 2. Split the string at the 'T' and take the first part (the date)
let utcDate = isoString.split('T')[0];

// Set the value to today's date in UTC
dateInput.value = utcDate;

console.log(utcDate); // Output: "2025-10-25"
note

Important Consideration: The UTC date can be different from the user's local date. For example, if a user is in New York (UTC-4) at 10 PM on October 26th, the UTC date is already October 27th. For most user-facing applications, the local date (Solution 1) is the more intuitive choice.

How the Local Date Formatting Works​

Let's break down the getFormattedDate function:

  • date.getFullYear(): Returns the full 4-digit year (e.g., 2023).
  • date.getMonth(): Returns the month, but it is zero-indexed (0 for January, 11 for December). This is a classic JavaScript quirk, so we must add 1 to get the correct month number.
  • date.getDate(): Returns the day of the month (1-31).
  • .toString().padStart(2, '0'): This is crucial. The date input requires two digits for the month and day (e.g., 09 instead of 9). padStart(2, '0') ensures that if a number is only one digit long, a 0 is added to the beginning of its string representation.

Conclusion​

Setting the value of a date input requires a specific YYYY-MM-DD string format.

  • The recommended best practice for user-facing applications is to use the user's local date. This requires manually constructing the string using getFullYear(), getMonth() + 1, and getDate(), ensuring each part is padded with leading zeros.
  • If your application logic is based on UTC, a convenient shortcut is to use new Date().toISOString().split('T')[0].

By creating a reusable formatting function, you can easily and reliably set the current date on any date input field.

Table of Contents