Intl.DateTimeFormat is a JavaScript API for formatting dates and times according to specific locales and options. It is natively supported in modern browsers and does not require external libraries for basic formatting.
Key Features
Locale Support: Accepts BCP 47 language tags (e.g.,
"en-US","fr-FR") or an array of tags for fallbacks.Customizable Formatting: Options like
dateStyle,timeStyle,weekday,month,day,hour,minute,second, andtimeZoneallow precise control.Time Zone Handling: Use the
timeZoneoption to format dates in a specific time zone (e.g.,"America/New_York","UTC").Time Format: Use
hour12: falsefor 24-hour format orhour12: truefor 12-hour format.Output: Returns a formatted string based on the specified locale and options.
Example Usage
const date = new Date(2024, 3, 29, 5, 30, 20);
// Format in US English with local time zone
new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
timeZoneName: 'short'
}).format(date);
// → "April 29, 2024, 5:30 AM PDT"
// Format in UTC
new Intl.DateTimeFormat('en-US', {
timeZone: 'UTC',
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
}).format(date);
// → "04/29/2024, 05:30"Best Practices
Use
Intl.DateTimeFormat()withnewor without — both work.For consistent behavior across environments, explicitly set
timeZoneinstead of relying on defaults.Use
timeStyleanddateStyle(e.g.,"full","long","medium","short") for predefined formats.The API is well-established and supported in all modern browsers since 2017.
Note: The
Intl.DateTimeFormatconstructor is part of the ECMAScript Internationalization API and is not a polyfill — it’s native JavaScript. For older browsers, use the formatjs polyfill to ensure compatibility.
This is very close to being off–topic as opinion based, but here goes anyway.
Which one of these should I use?
Date.prototype.toLocaleString was originally solely implementation dependent and varied quite a bit across browsers. When support for the Intl object was added (ECMAScript 2015, ed 6) then toLocaleString was allowed to support the same options. While support isn't mandated by ECMA-262, probably all current implementations support it.
Note that this did not remove the allowed implementation variability, it just provided some formatting options based on language, region and dialect (and also timezone options based on the IANA time zone database identifiers and values).
The Intl object (and hence toLocaleString) is based on ECMA-402, which doesn't strictly specify formatting, so there is still some room for implementations to differ. The biggest differences are in regard to timezone names (for which there is no standard) and placement of commas, spaces, etc.
However, for most practical purposes, whether you use the Intl object or toLocaleString is up to you, I don't think there's any technical reason to prefer one over the other. While the results for both should be identical for a particular implementation, don't expect the resulting string to be exactly identical across implementations or to conform to a particular format for a given BCP 47 language tag.
Answer from RobG on Stack OverflowJavaScript Intl.DateTimeFormat.format vs Date.toLocaleString - Stack Overflow
Mastering date formatting using Intl.DateTimeFormat in JavaScript
Ability to specify a custom format for Intl.DateTimeFormat
How to format a JavaScript date object using Intl.DateTimeFormat - Stack Overflow
Videos
This is very close to being off–topic as opinion based, but here goes anyway.
Which one of these should I use?
Date.prototype.toLocaleString was originally solely implementation dependent and varied quite a bit across browsers. When support for the Intl object was added (ECMAScript 2015, ed 6) then toLocaleString was allowed to support the same options. While support isn't mandated by ECMA-262, probably all current implementations support it.
Note that this did not remove the allowed implementation variability, it just provided some formatting options based on language, region and dialect (and also timezone options based on the IANA time zone database identifiers and values).
The Intl object (and hence toLocaleString) is based on ECMA-402, which doesn't strictly specify formatting, so there is still some room for implementations to differ. The biggest differences are in regard to timezone names (for which there is no standard) and placement of commas, spaces, etc.
However, for most practical purposes, whether you use the Intl object or toLocaleString is up to you, I don't think there's any technical reason to prefer one over the other. While the results for both should be identical for a particular implementation, don't expect the resulting string to be exactly identical across implementations or to conform to a particular format for a given BCP 47 language tag.
If you re-use the same format a lot of times, re-using Intl.DateTimeFormat object seems to be better from a performance perspective.
const format = {
weekday: 'long',
month: 'long',
day: '2-digit',
};
const dateTimeFormat = new Intl.DateTimeFormat('en', format);
const start1 = performance.now();
for (let i = 0; i < 10000; i++) dateTimeFormat.format(new Date());
console.log('re-use Intl.DateTimeFormat', performance.now() - start1);
const start2 = performance.now();
for (let i = 0; i < 10000; i++) new Date().toLocaleString('en', format);
console.log('use toLocaleString', performance.now() - start2);When I run this snippet in Chrome 105, it gives me a result like this:
re-use Intl.DateTimeFormat 17.299999952316284
use toLocaleString 876.0999999046326
Here's my version of this, you can use formatToParts() function to get them by part assuming you will be using the same format every time, and then get them by object array so that you can create your own format allowing you to add custom text. Although it would be much more easier and efficient if you will use some other Date formatter.
let checkoutDate = new Date();
var th = 'th';
var formatter = new Intl.DateTimeFormat('en-us', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
fractionalSecondDigits: 3,
timeZone: 'UTC'
});
var formatted = formatter.formatToParts(checkoutDate);
var day = formatted[4].value;
var wr = checker(day);
console.log(wr);
console.log(formatted[0].value+ ',', day +wr, formatted[2].value, formatted[6].value);
function checker(x){
if (x > 3 && x < 21) return 'th';
switch (x % 10) {
case 1: return "st";
case 2: return "nd";
case 3: return "rd";
default: return "th";
}
}
//output Friday, 13th March 2020
You can try this way:
var isoString = new Date().toISOString();
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var date = new Date(isoString);
var americanDate = new Intl.DateTimeFormat("en-US", options).format(date);
console.log(americanDate); //Friday, March 13, 2020
Using moment.js you can do better date-time format.