How To Format A Date In Javascript


By squashlabs, Last Updated: August 14, 2023

How To Format A Date In Javascript

Formatting dates in JavaScript is a common task that developers often encounter in their web applications. In this guide, we will explore different techniques and methods to format dates in JavaScript.

Why is date formatting important?

Date formatting is important because it allows us to present dates in a human-readable format. By formatting dates, we can display them in a way that is easy to understand and interpret by users. Additionally, date formatting is crucial when working with internationalization and localization, as different regions may have different date formats.

Related Article: How To Check If a Key Exists In a Javascript Object

Method 1: Using the toLocaleString() method

One of the simplest ways to format a date in JavaScript is by using the toLocaleString() method. This method is built-in and provides a way to format dates based on the user’s locale.

Here is an example of how to use the toLocaleString() method to format a date:

const date = new Date();
const formattedDate = date.toLocaleString();


By default, the toLocaleString() method will format the date and time according to the user’s local settings. However, you can also pass options to customize the formatting. For example, you can specify the weekday, year, month, day, hour, minute, and second options to include or exclude specific parts of the date and time.

const date = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
const formattedDate = date.toLocaleString(undefined, options);


Method 2: Using the Intl.DateTimeFormat object

Another approach to formatting dates in JavaScript is by using the Intl.DateTimeFormat object. This object provides more control over the formatting options and allows us to format dates in a specific locale.

Here is an example of how to use the Intl.DateTimeFormat object to format a date:

const date = new Date();
const formatter = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
const formattedDate = formatter.format(date);


In the example above, we create a new Intl.DateTimeFormat object and pass the desired locale and formatting options. The format() method is then used to format the date according to the specified options.

Method 3: Using third-party libraries

While JavaScript provides built-in methods for formatting dates, there are also several third-party libraries available that offer more advanced and flexible formatting options. Some popular libraries include Moment.js, Luxon, and date-fns.

Here is an example of how to format a date using Moment.js:

const date = moment();
const formattedDate = date.format('MMMM Do YYYY, h:mm:ss a');


To use Moment.js, you will need to include the library in your project by either downloading it manually or installing it via a package manager like npm. Once included, you can create a Moment object from a date and use the format() method to specify the desired format.

Related Article: How To Use the Javascript Void(0) Operator

Method 4: Custom formatting with string manipulation

If you prefer more control over the formatting process, you can also manually manipulate the date string using string manipulation methods. While this method requires more manual work, it allows for complete customization of the date format.

Here is an example of custom formatting using string manipulation:

const date = new Date();

const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;


In the example above, we extract the year, month, and day from the date object using various methods (getFullYear(), getMonth(), getDate()). We then use string manipulation methods (String() and padStart()) to ensure that each part of the date is formatted correctly.

How to Check If a Value is an Object in JavaScript

This article provides a simple guide on checking if a value is an object using JavaScript. It covers using the typeof operator, the instanceof operator, alternative... read more

How To Capitalize the First Letter In Javascript

Learn how to use Javascript to make the first letter of a string uppercase with simple code. This article explores two methods: using the toUpperCase() and slice()... read more

How To Get A Timestamp In Javascript

In this article, you will learn how to get a timestamp in JavaScript. Whether you need to obtain the current timestamp or convert a date to a timestamp, we will explore... read more

How To Validate An Email Address In Javascript

Email validation is an essential part of web development to ensure the correct format of email addresses. In this article, you will learn how to validate email addresses... read more

How to Access Cookies Using Javascript

Accessing cookies using JavaScript is a practical guide that provides step-by-step instructions on how to manipulate cookies in JavaScript. From accessing and setting... read more

How to Use the JSON.parse() Stringify in Javascript

Learn how to use the JSON parse and stringify methods in this tutorial. Discover the basics of JSON in JavaScript and how to work with the JSON.parse() and... read more