Zamora's Blog

Handle YYYY-MM-DD in JavaScript

May 16, 2021

Getting the year, month and date in JavaScript without a library isn’t very difficult. However, getting it into the format you want can be frustrating the first time you encounter this issue. I approach this in two different ways depending on whether I’m using an ISO date string or local date string.

ISO Date String

// Sun May 16 2021 20:01:05 GMT+0900 (Japan Standard Time)
const exampleA = new Date();
const [ year, month, date ] = exampleA.toISOString().split("T")[0].split("-");
// "2021-05-16"
console.log(`${year}-${month}-${date}`);

Local Date String

// Sun May 16 2021 20:58:45 GMT+0900 (Japan Standard Time)
const exampleB = new Date();
const [ date, month, year] = exampleB.toLocaleDateString("en-GB").split("/");
// "2021-05-16"
console.log(`${year}-${month}-${date}`);

Please note that the date string that the toLocaleDateString method returns changes depending on the locale code that is passed to it. For example, toLocaleDateString("en-US") will return "5/16/2021". Make sure to adjust how you split and deconstruct the date string to deal with your local date format.

Adding or Omitting a Leading Zero

Sometimes you will need pass the a date to an input or component with or without a leading zero. The slice method and the parseInt function can accomplish this.

Adding a Leading Zero:

const [month, date, year] = (new Date()).toLocaleDateString("en-US").split("/");
// "2021-5-5"
console.log(`${year}-${month}-${date}`);
// "2021-05-05"
console.log(`${year}-${("00" + month).slice(-2)}-${("00" + date).slice(-2)}`);

Omit a Leading Zero:

const [date, month, year] = (new Date()).toLocaleDateString("en-GB").split("/");
// "2021-05-05"
console.log(`${year}-${month}-${date}`);
// "2021-5-5"
console.log(`${year}-${parseInt(month)}-${parseInt(date)}`);

Conclusion

Getting YYYY-MM-DD in your desired format in JavaScript without a library isn’t straight forward. But the split method and array deconstructing can make the process less difficult when a library isn’t an option.


© Andrew Zamora 2023