How to convert a date to a string in JavaScript

There are multiple ways to format a date in JavaScript. You can either use the built-in methods like toUTCString() and toISOString(), or the Intl.DateTimeFormat object.

Convert date to string using built-in methods

The Date object in JavaScript exposes several built-in methods that you can use to display the date in different formats.

By default, the toString() method outputs the date in full text string format:

const date = new Date(2021, 8, 14, 7, 14);

console.log(date.toString());
// OR
console.log(date);

// Tue Sep 14 2021 07:14:00 GMT+0500 (Pakistan Standard Time)

To display a date as a UTC string, you can use the toUTCString() method:

console.log(date.toUTCString());
// Tue, 14 Sep 2021 02:14:00 GMT

If you want to show the date in ISO format, you use the toISOString() method instead:

console.log(date.toISOString());
// 2021-09-14T02:14:00.000Z

Similarly, you can use toDateString() and toTimeString() methods to display only date and time parts of the Date object, respectively:

console.log(date.toDateString());
// Tue Sep 14 2021

console.log(date.toTimeString());
// 07:14:00 GMT+0500 (Pakistan Standard Time)

You are not limited to the above methods only. Off course, you can also use methods like getDate(), getMonth(), and getFullYear() to retrieve day, month, and full year from a date object in JavaScript:

const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();

const str = `${day}/${month}/${year}`;

console.log(str);
// 14/9/2021

Convert date to string using Intl.DateTimeFormat methods

The Intl.DateTimeFormat object is available in all modern browsers and IE 11. It provides methods for language-sensitive date and time formatting in JavaScript.

One such method is format() that formats a date according to the locale and formatting options of the Intl.DateTimeFormat object.

Here is an example that formats the date using the default locale:

const date = new Date(2021, 8, 14, 7, 14);

const str = Intl.DateTimeFormat().format(date);

console.log(str);
// 14/9/2021

If you need more localized date and time format, just pass the desired locale to Intl.DateTimeFormat() as shown below:

console.log(new Intl.DateTimeFormat('de-DE').format(date));
// 14.9.2021

console.log(new Intl.DateTimeFormat('ko-KR').format(date));
// 2021. 9. 14.

console.log(new Intl.DateTimeFormat('ar-EG').format(date));
// ١٤‏/٩‏/٢٠٢١

The date object can be further customized by passing an options object to the Intl.DateTimeFormat() constructor:

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

console.log(new Intl.DateTimeFormat('de-DE', options).format(date));
// Dienstag, 14. September 2021

options.timeZone = 'CET';
options.timeZoneName = 'short';

console.log(new Intl.DateTimeFormat('it-IT', options).format(date));
// martedì 14 settembre 2021, GMT+2

options.fractionalSecondDigits = 3;

console.log(new Intl.DateTimeFormat('ar-EG', options).format(date));
// الاثنين، ١٣ سبتمبر ٢٠٢١ ٠٠٠ غرينتش-٥

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like...

Digital Ocean

The simplest cloud platform for developers & teams. Start with a $200 free credit.

Buy me a coffee ☕

If you enjoy reading my articles and want to help me out paying bills, please consider buying me a coffee ($5) or two ($10). I will be highly grateful to you ✌️

Enter the number of coffees below:

✨ Learn to build modern web applications using JavaScript and Spring Boot

I started this blog as a place to share everything I have learned in the last decade. I write about modern JavaScript, Node.js, Spring Boot, core Java, RESTful APIs, and all things web development.

The newsletter is sent every week and includes early access to clear, concise, and easy-to-follow tutorials, and other stuff I think you'd enjoy! No spam ever, unsubscribe at any time.