Set the value of datetime-local input field from an Date object

#javascript #html #beginners

We can use datetime-local to let user enter a date-time string. Most browsers have already implemented a native UI for it. It should be the most ideal way to have date-time input.

<input 
  id="start-time" 
  type="datetime-local" 
  name="start_time"
>

The input is always blank at the beginning. I wanted to give it the current time as its default value but it didn't work.

const currentTime = new Date()
document.getElementById('start-time').value = currentTime // does not work

Because datetime-local only accepts a specific string value, YYYY-mm-ddTHH:MM

YYYY-mm-dd is the year-month-date
T is just the seperator of date and time
HH:MM is the hours and minutes

Therefore, instead of assigning a Date object directly, you have to convert it first into that form. You can use toISOString() because the it will convert the Date object to
YYYY-MM-DDTHH:mm:ss.sssZ and the first part is exactly the same format the datetime-local needs.

const currentTime = new Date()
document.getElementById('start-time').value = currentTime.toISOString().slice(0, 16);

However, it has a problem that it will use the UTC time which is timezone +00:00. I guess not so many people live within that time zone compared to all populations on Earth. I think most developers want to convert that to the local time.

Unfortunately, I found it ridiculously difficult to do that because there's no suitable method for handling that. I think it's due to the fact that most languages have a method similar to strftime so we are used to using an existing method to do what we want. There are some methods like toLocaleString() which seems like we can convert Date into some specific format but none of the format fits our needs. It feels like a basic functionality so I don't want to use any other libraries, either.

Finally, with some help from chatGPT and looking up of MDN page of the Date library. I finally realize the best to do that is to compose the string by myself.

// getFullYear, getMonth, getDate, getHours, getMinutes all return values of local time.
const convertToDateTimeLocalString = (date) => {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");

  return `${year}-${month}-${day}T${hours}:${minutes}`;
}
const currentTime = new Date()
document.getElementById('start-time').value = convertToDateTimeLocalString(currentTime)