Skip to main content

How to Set the Value of a Date and Time Input in JavaScript

HTML5 introduced native input controls for dates and times (<input type="date">, type="time", type="datetime-local"), providing a user-friendly interface for date selection. To set the value of these inputs programmatically with JavaScript, you must provide a string in a specific, standardized format, regardless of how the date is displayed to the user in their browser.

This guide will teach you the correct string formats required by each input type and show you how to create a simple helper function to format a JavaScript Date object accordingly.

The Core Problem: Required String Formats​

The main challenge is that each date/time input type requires its value to be set using a very specific string format. While the browser might display the date differently based on the user's locale (e.g., "10/27/2023"), the underlying value you set must conform to the standard.

  • <input type="date">: Requires a string in YYYY-MM-DD format.
    • Example: "2025-10-25"
  • <input type="time">: Requires a string in hh:mm (24-hour) format. Seconds are optional (hh:mm:ss).
    • Example: "14:30"
  • <input type="datetime-local">: Requires a string in YYYY-MM-DDThh:mm format. The T is a required literal character that separates the date and time.
    • Example: "2025-10-25T14:30"

The Solution: Formatting a Date Object​

A standard JavaScript Date object does not have a built-in method that produces these exact formats. Therefore, we must construct the strings manually by extracting the year, month, day, hours, and minutes from the Date object.

A crucial step is zero-padding: a month like 5 must be formatted as 05. The String.prototype.padStart() method is perfect for this.

Setting the Value of Each Input Type​

Let's see how to format a Date object and set the value for each input type.

HTML:

<input type="date" id="date-input">
<input type="time" id="time-input">
<input type="datetime-local" id="datetime-local-input">

JavaScript:

// Let's use the current date and time as our example
let now = new Date();

// --- Helper for zero-padding ---
function pad(number) {
  return String(number).padStart(2, '0');
}

// --- Format for <input type="date"> ---
let year = now.getFullYear();
let month = pad(now.getMonth() + 1); // getMonth() is zero-based
let day = pad(now.getDate());

let dateString = `${year}-${month}-${day}`;
document.getElementById('date-input').value = dateString;
console.log('Date value set:', dateString); // Output: e.g., "2025-10-25"

// --- Format for <input type="time"> ---
let hours = pad(now.getHours());
let minutes = pad(now.getMinutes());

let timeString = `${hours}:${minutes}`;
document.getElementById('time-input').value = timeString;
console.log('Time value set:', timeString); // Output: e.g., "14:30"

// --- Format for <input type="datetime-local"> ---
let dateTimeLocalString = `${dateString}T${timeString}`;
document.getElementById('datetime-local-input').value = dateTimeLocalString;
console.log('Datetime-local value set:', dateTimeLocalString); // Output: e.g., "2025-10-25T14:30"

Practical Example: A Reusable Formatting Function​

To make this process cleaner and reusable, you can create a helper function that formats a Date object into the required YYYY-MM-DDTHH:mm string, from which you can easily extract the parts you need.

/**
 * Formats a Date object into a string suitable for datetime-local inputs.
 * @param {Date} date - The date to format.
 * @returns {string} The formatted string, e.g., "2025-10-25T14:30".
 */
function toDateTimeLocalString(date) {
  let pad = (num) => String(num).padStart(2, '0');
  
  let year = date.getFullYear();
  let month = pad(date.getMonth() + 1);
  let day = pad(date.getDate());
  let hours = pad(date.getHours());
  let minutes = pad(date.getMinutes());
  
  return `${year}-${month}-${day}T${hours}:${minutes}`;
}

// --- Example Usage ---
let now = new Date();
let formattedDateTime = toDateTimeLocalString(now);

let [datePart, timePart] = formattedDateTime.split('T');

document.getElementById('date-input').value = datePart;
document.getElementById('time-input').value = timePart;
document.getElementById('datetime-local-input').value = formattedDateTime;
note

This function is a robust and maintainable way to handle all your date input formatting needs.

Conclusion​

Setting the value of date and time inputs in JavaScript is straightforward once you know the required string formats.

  • The key is to construct a string that matches the standard format expected by the input's value property, not the format displayed to the user.
  • YYYY-MM-DD for <input type="date">.
  • hh:mm for <input type="time">.
  • YYYY-MM-DDThh:mm for <input type="datetime-local">.
  • Always zero-pad your month, day, hour, and minute values to two digits using a helper function or padStart().

By formatting your Date objects correctly, you can reliably and programmatically control the state of your date and time inputs.

Table of Contents