Set the Values of Input type Date and Time using JavaScript

Set the Values of Input type Date and Time #

Use the value property on the input elements of type date, time and datetime-local to set their values, e.g. dateInput.value = '2022-06-24'. The value property can be used to get and set the value of an input type date, time and datetime-local.

Here is the HTML for the examples in this article.

index.html

Copied!
<!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" />

    <br /><br />

    <label for="appt">Input type Time:</label>
    <input type="time" id="time" name="appt" />

    <br /><br />

    <label for="meeting-time">Input type Datetime-local:</label>
    <input type="datetime-local" id="datetime-local" name="meeting-time" />

    <script src="index.js"></script>
  </body>
</html>

In our HTML, we created an input type: date, input type: time, and an input type: datetime-local.

Here is the JavaScript code that shows how to set and get their values.

index.js

Copied!
const [date, time] = formatDate(new Date()).split(' ');
console.log(date); // 👉️ 2021-12-31
console.log(time); // 👉️ 09:43

// ✅ Set Date input Value
const dateInput = document.getElementById('date');
dateInput.value = date;

// 👇️️ "2021-12-31"
console.log('dateInput value: ', dateInput.value);

// ✅ Set time input value
const timeInput = document.getElementById('time');
timeInput.value = time;

// 👇️ "09:43"
console.log('timeInput value: ', timeInput.value);

// ✅ Set datetime-local input value
const datetimeLocalInput = document.getElementById('datetime-local');
datetimeLocalInput.value = date + 'T' + time;

// 👇️ "2021-12-31T10:09"
console.log('dateTimeLocalInput value: ', datetimeLocalInput.value);

// 👇️👇️👇️ Format Date as yyyy-mm-dd hh:mm:ss
// 👇️ (Helper functions)
function padTo2Digits(num) {
  return num.toString().padStart(2, '0');
}

function formatDate(date) {
  return (
    [
      date.getFullYear(),
      padTo2Digits(date.getMonth() + 1),
      padTo2Digits(date.getDate()),
    ].join('-') +
    ' ' +
    [
      padTo2Digits(date.getHours()),
      padTo2Digits(date.getMinutes()),
      // padTo2Digits(date.getSeconds()),  // 👈️ can also add seconds
    ].join(':')
  );
}

// 👇️ 2021-12-31 09:46
formatDate(new Date());

// 👇️ 2025-05-04 05:24
formatDate(new Date('May 04, 2025 05:24:07'));

It's quite a long snippet, but a good chunk of the code is comments and helper functions.

We created a reusable function that takes a Date object and formats it as yyyy-mm-dd hh:mm.

You can optionally uncomment the line that adds the seconds towards the end of the formatDate function if you want to format the date as yyyy-mm-dd hh:mm:ss.

We used the value property on each of the inputs to set the date, time and datetime-local values.

The input type date expects a value in the format of YYYY-MM-DD.
The input type time expects a value in the format of hh:mm or hh:mm:ss.
The input type datetime-local expects a value in the format of YYYY-MM-DDThh:mm.

How the browser formats the input fields depends on your locale, operating system, etc. However the input values will always be of the above formats.

What our formatDate function does is:

it reads the year, month, date, hours, minutes, seconds (optionally) from the passed in Date object
pads the digits with a leading zero if for example the hours or minutes are less than 10

We need to handle the scenario where the month, day, hours, minutes or seconds value will be less than 10 and produce consistent output.

Here is a screenshot of how the input fields look on my machine. I'm in the EU and I'm on Linux.

set values input date time

Note that you don't have to set the input values to the current date / time. The formatDate function takes a Date object, which you can set to a date and time in the future or past.

Here is an example that passes a future Date and time - 2025-05-04 05:24 to the method.

index.js

Copied!
const [date, time] = formatDate(new Date('May 04, 2025 05:24')).split(' ');
console.log(date); // 👉️ 2025-05-04
console.log(time); // 👉️ 05:24

// ✅ Set Date input Value
const dateInput = document.getElementById('date');
dateInput.value = date;

console.log('dateInput value: ', dateInput.value); // 👉️ "2025-05-04"

// ✅ Set time input value
const timeInput = document.getElementById('time');
timeInput.value = time;

console.log('timeInput value: ', timeInput.value); // 👉️ "05:24"

// ✅ Set datetime-local input value
const datetimeLocalInput = document.getElementById('datetime-local');
datetimeLocalInput.value = date + 'T' + time;

// 👇️ "2025-05-04T05:24"
console.log('dateTimeLocalInput value: ', datetimeLocalInput.value);

// 👇️ Format Date as yyyy-mm-dd hh:mm:ss

function padTo2Digits(num) {
  return num.toString().padStart(2, '0');
}

function formatDate(date) {
  return (
    [
      date.getFullYear(),
      padTo2Digits(date.getMonth() + 1),
      padTo2Digits(date.getDate()),
    ].join('-') +
    ' ' +
    [
      padTo2Digits(date.getHours()),
      padTo2Digits(date.getMinutes()),
      // padTo2Digits(date.getSeconds()),  // 👈️ can also add seconds
    ].join(':')
  );
}

// 👇️ 2022-07-31 09:36
formatDate(new Date());

// 👇️ 2025-05-04 05:24
formatDate(new Date('May 04, 2025 05:24:07'));

And here is how the browser output looks like.

set values date time custom date

If you are having difficulties setting the date and time values programmatically, you first want to check your formatting, and then check if the input fields have constraints, e.g. max or min value.

index.html

Copied!
<input
  type="date"
  id="date"
  name="trip-start"
  min="2021-01-01"
  max="2021-12-31"
/>

The input field above has a constraint for the min and max specified Dates.

If you click on the input in your browser it would not allow you to select a date out of the specified range.

While you might be able to set a different value programmatically, it's something to keep in mind.

Another thing to note is that if you submit the time using an HTTP GET request, the colon character needs to be escaped when included in the URL parameters, e.g. time=2021-12-31T08%3A30.

You can use the encodeURI() function to encode a URI and replace the colon with an escape sequence of UTF-8 encoded characters.

Here is an example that sets the seconds of the time and datetime-local inputs.

index.js

Copied!
const [date, time] = formatDate(new Date()).split(' ');
console.log(date); // 👉️ "2021-12-31"
console.log(time); // 👉️ "10:43:36"

// ✅ Set Date input Value
const dateInput = document.getElementById('date');
dateInput.value = date;

// 👇️ "2021-12-31"
console.log('dateInput value: ', dateInput.value);

// ✅ Set time input value
const timeInput = document.getElementById('time');
timeInput.value = time;

// 👇️ "10:43:42"
console.log('timeInput value: ', timeInput.value);

// ✅ Set datetime-local input value
const datetimeLocalInput = document.getElementById('datetime-local');
datetimeLocalInput.value = date + 'T' + time;

// 👇️ "2021-12-31T10:43:42"
console.log('dateTimeLocalInput value: ', datetimeLocalInput.value);

// 👇️ Format Date as yyyy-mm-dd hh:mm:ss

function padTo2Digits(num) {
  return num.toString().padStart(2, '0');
}

function formatDate(date) {
  return (
    [
      date.getFullYear(),
      padTo2Digits(date.getMonth() + 1),
      padTo2Digits(date.getDate()),
    ].join('-') +
    ' ' +
    [
      padTo2Digits(date.getHours()),
      padTo2Digits(date.getMinutes()),
      padTo2Digits(date.getSeconds()),
    ].join(':')
  );
}

// 👇️ 2022-07-31 09:36
formatDate(new Date());

// 👇️ 2025-05-04 05:24
formatDate(new Date('May 04, 2025 05:24:07'));

And here is how the output with seconds looks in my browser.

set values date time with seconds

All we did is uncomment the line that grabs the seconds from the Date object in the formatDate function.

Set the Values of Input type Date and Time using JavaScript

Set the Values of Input type Date and Time #

Borislav Hadzhiev