How to Format Date in JavaScript (with Examples)

By /

Date formatting is a common operation in JavaScript to make the dates look different depending on the context. Traditionally, you might think you need to use a library such as Date-fns, to format dates.

But for smaller projects, using a library to format dates can be overkill because JavaScript also has some built-in data formatting options.

Today, you are going to learn how to use native JavaScript to format dates.

For example, let’s format the current date in the US to look like this: Saturday, Oct 15, 2022:

const today = new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"})

console.log(today)

Output:

Saturday, Oct 15, 2022

This comprehensive guide teaches you how to format dates in different locales.

How to Format Dates in JavaScript?

Obtaining or creating a date object in JavaScript is not a big deal. You can do this with one line of code by using the built-in Date() constructor.

For example:

const today = new Date()
console.log(today)

Output:

2022-10-15T19:02:16.589Z

When you run the above code, JavaScript uses your browser’s time zone and shows the complete date information as a string.

Showing the date in the above format isn’t usually something you want to show your end users.

But the trickier part is to format the date properly. This is why developers might end up using a date formatting library in their projects. Even though many use external libraries, you can accomplish practically all date formatting tasks by using native JavaScript code with no hassle.

Format Dates with .toLocaleDateString() Method

In case the default formatting of the date doesn’t meet your (users’) eye, you can use the built-in Date.toLocaleDateString() method to format your dates.

There are three ways you can use this method:

  1. Date.toLocaleDateString(). Without any arguments, this method returns the default language-sensitive format of the date object.
  2. Date.toLocaleDateString(locales). The first optional argument locales specify the localization (or localizations) of the date to display it in the format of other countries. You need to specify the localization as a standard locale code (such as en-US or fi-FI)
  3. Date.toLocaleDateString(locales, options). The second optional parameter, options, lets you customize the output format. For example, you can choose to show only the day, hour, and minute and leave other time components out.

As you can see, these three ways of calling the .toLocaleDateString() method let you fully customize the date to be shown.

The best way to learn how to use this date formatting strategy is by trying it yourself.

Here are some examples of formatting dates to different time zones:

const currentDate = new Date();

const options = { 
    weekday: 'long',
    year: 'numeric',
    month: 'short',
    day: 'numeric'
};

console.log(currentDate.toLocaleDateString('fi-FI', options));
//lauantaina 15. lokak. 2022

console.log(currentDate.toLocaleDateString('ar-EG', options))
// السبت، ١٥ أكتوبر ٢٠٢٢

console.log(currentDate.toLocaleDateString('en-us', options));
//Saturday, Oct 15, 2022

Here are all the parameter names and types available when specifying the options argument in the .toLocaleDateString() method:

{
    weekday: 'short',  // long, short, narrow
    day: 'numeric',    // numeric, 2-digit
    year: 'numeric',   // numeric, 2-digit
    month: 'long',     // numeric, 2-digit, long, short, narrow
    hour: 'numeric',   // numeric, 2-digit
    minute: 'numeric', // numeric, 2-digit
    second: 'numeric', // numeric, 2-digit
}

With this in mind, let’s see one more example. This time, let’s show the time in Great Britain such that:

  • The weekday is in a long format.
  • The year is a 2-digit string.
  • The month is in a short format.
  • The day is in numeric format.
  • The hour and minute are 2-digit strings.
const currentDate = new Date();

const options = { 
    weekday: 'long',
    year: '2-digit',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
};

console.log(currentDate.toLocaleDateString('en-GB', options));

Output:

Saturday, 15 Oct 22, 19:32

Need More Formatting Options?

Okay, I promised this tutorial is all about native JavaScript.

But I think this tutorial wouldn’t be complete without mentioning an external library you might want to use.

For example, if you want to easily customize the date format to something like yyyy/mm/dd hh:mm:ss, you might want to use the moment library.

When you have installed the moment library, you can format date components easily on the fly.

For example:

moment().format('MMMM Do YYYY, h:mm:ss a'); // October 15th 2022, 10:52:34 pm

Notice that Moment has a great installation guide and some useful examples on its homepage:

Conclusion

In JavaScript, getting the current date is easy by using the new Date() constructor. The problem with this is the date format. The default date formatting isn’t something you want to show to your end users.

Instead of relying on a third-party library, you can use native JavaScript easily to format dates.

To format dates in JavaScript, use the .toLocaleDateString() method of the Date object. You can pass this method two optional arguments:

  1. locales for specifying the localization(s) in which you want to show the time.
  2. options for formatting the date components more specifically.

Although most of the date formatting is possible by using native JavaScript, you sometimes might want to do some advanced formatting. For instance, to format a date to yyyy/dd/mm hh:mm:ss, you’d need to create a custom script.

In this case, consider installing the free moment library. This popular date library handles common data formatting tasks with care.

Using a library overcomes silly mistakes with date formatting scripts found online.

Scroll to Top