How To Format A Date As YYYY-MM-DD Hh:mm:ss In JavaScript

Format a Date as YYYY-MM-DD hh:mm:ss in JavaScript

Format a date as YYYY-MM-DD hh:mm:ss in JavaScript will be very useful when you want to set UI and want to style the time show. So how to do it? – Let’s go into detail.

Format a date as YYYY-MM-DD hh:mm:ss in JavaScript

There are some methods for you to get time in Javascript. You can use new Date() constructor to get the current time in your location. Then the toISOString() method helps you to make an instance that returns a string indicating the current time.

Example:

const currentTime = new Date();
console.log(currentTime.toISOString());

Output:

2022-10-06T09:40:18.310Z

This type of time call ISO Dates (YYYY-MM-DDTHH:MM: SSZ).

If you want to get time in a millisecond from 00:00:00 January 1, 1970 till now, you can use the now() function.

Example:

const time = Date.now();
console.log(time);

Output:

1665049739373

Or you can use this trick.

Example:

const time = new Date() * 1;
console.log(time);

Output:

1665049811747

There are a lot of ways to play with time in Javascript. You can read more about it here.

You can follow the method below if you want your time to be expressed as YYYY-MM-DD.

Use getFullYear() , getMonth(), getDate() method

Javascript provide for us some very use method that help you to get separate year, month, date which is getFullYear(), getMonth(), getDate() method. Like its name, those methods will help you to get a year in four-digit number type, month in the range from 0 to 11, and Date from 1 to 31. In Javascript, it will count from 0, so with the getMonth() method, remember to plus one to the result.

Example:

const time = new Date();
const month = time.getMonth() + 1;
const day = time.getDate();
const year = time.getFullYear();

console.log("month: ", month);
console.log("date: ", day);
console.log("year: ", year);

Output:

month: 10
date: 6
year: 2022

Here to connect it together, we can do this:

Example:

const time = new Date();
const month = time.getMonth() + 1;
const day = time.getDate();
const year = time.getFullYear();
const timeShow = `${year}-${month}-${day}`;

console.log(timeShow);

Output:

2022-10-6

But notice that here the date is six, which is not bigger than ten then just have only one digit. But in some browsers, with month and Date that do not have 0 before the number only has one digit will lead to an error. To solve it, you can use the padStart() method.

The padStart() method

The padStart() method will help you to check that your string is not enough length you require, then insert the string you want at the start point.

Syntax:

string.padStart(length, padString)

Parameters

  • length: Fixed length that you want. If your original string length is lower, padString will be added.
  • padString: A string that you want to pad to your origin string.

Example:

const time = new Date();
const month = time.getMonth() + 1;
const date = time.getDate();
const year = time.getFullYear();
const monthPadded = (month + "").padStart(2, "0");
const datePadded = (date + "").padStart(2, "0");
const timeShow = `${year}-${monthPadded}-${datePadded}`;

console.log(timeShow);

Output:

2022-10-06

Here I plus month and date with an empty string is a trick that helps you convert from number to string type. As you see with the padStart() method, for a single digit month, a zero is added before it.

Summary

In this tutorial, I’ve shown you how to format a Date as YYYY-MM-DD hh:mm:ss in JavaScript. Hopefully it will be useful for you. Thanks for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *