published: 11 Sep 2022
2 min read
How to format 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.
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
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));
// martedi 14 settembre 2021, GMT+2
options.fractionalSecondDigits = 3;
console.log(new Intl.DateTimeFormat('ar-EG', options).format(date));
// الاثنين، ١٣ سبتمبر ٢٠٢١ ٠٠٠ غرينتش-٥
Are we missing something? Help us improve this article. Reach out to us.
How to format 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.
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
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));
// martedi 14 settembre 2021, GMT+2
options.fractionalSecondDigits = 3;
console.log(new Intl.DateTimeFormat('ar-EG', options).format(date));
// الاثنين، ١٣ سبتمبر ٢٠٢١ ٠٠٠ غرينتش-٥
Are you looking for other code tips?
JS Nooby
Javascript connoisseur
