Intl.DateTimeFormat() constructor
The Intl.DateTimeFormat()
constructor creates Intl.DateTimeFormat
objects.
Try it
Syntax
new Intl.DateTimeFormat()
new Intl.DateTimeFormat(locales)
new Intl.DateTimeFormat(locales, options)
Intl.DateTimeFormat()
Intl.DateTimeFormat(locales)
Intl.DateTimeFormat(locales, options)
Note: Intl.DateTimeFormat()
can be called with or without new
. Both create a new Intl.DateTimeFormat
instance. However, there's a special behavior when it's called without new
and the this
value is another Intl.DateTimeFormat
instance; see Return value.
Parameters
locales
Optional-
A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the
locales
argument, see the parameter description on theIntl
main page. The following Unicode extension keys are allowed:nu
-
Numbering system. Possible values include:
"arab"
,"arabext"
,"bali"
,"beng"
,"deva"
,"fullwide"
,"gujr"
,"guru"
,"hanidec"
,"khmr"
,"knda"
,"laoo"
,"latn"
,"limb"
,"mlym"
,"mong"
,"mymr"
,"orya"
,"tamldec"
,"telu"
,"thai"
,"tibt"
. ca
-
Calendar. Possible values include:
"buddhist"
,"chinese"
,"coptic"
,"dangi"
,"ethioaa"
,"ethiopic"
,"gregory"
,"hebrew"
,"indian"
,"islamic"
,"islamic-umalqura"
,"islamic-tbla"
,"islamic-civil"
,"islamic-rgsa"
,"iso8601"
,"japanese"
,"persian"
,"roc"
,"islamicc"
.Warning: The
islamicc
calendar key has been deprecated. Please useislamic-civil
. hc
-
Hour cycle. Possible values include:
"h11"
,"h12"
,"h23"
,"h24"
.
options
Optional-
An object with some or all of the following properties:
dateStyle
-
The date formatting style to use when calling
format()
. Possible values include:"full"
"long"
"medium"
"short"
Note:
dateStyle
can be used withtimeStyle
, but not with other options (e.g.weekday
,hour
,month
, etc.). timeStyle
-
The time formatting style to use when calling
format()
. Possible values include:"full"
"long"
"medium"
"short"
Note:
timeStyle
can be used withdateStyle
, but not with other options (e.g.weekday
,hour
,month
, etc.). calendar
-
Calendar. Possible values include:
"buddhist"
,"chinese"
,"coptic"
,"dangi"
,"ethioaa"
,"ethiopic"
,"gregory"
,"hebrew"
,"indian"
,"islamic"
,"islamic-umalqura"
,"islamic-tbla"
,"islamic-civil"
,"islamic-rgsa"
,"iso8601"
,"japanese"
,"persian"
,"roc"
,"islamicc"
.Warning: The
islamicc
calendar key has been deprecated. Please useislamic-civil
. dayPeriod
-
The formatting style used for day periods like "in the morning", "am", "noon", "n" etc. Possible values include:
"narrow"
,"short"
,"long"
.Note:
- This option only has an effect if a 12-hour clock is used.
- Many locales use the same string irrespective of the width specified.
numberingSystem
-
Numbering System. Possible values include:
"arab"
,"arabext"
,"bali"
,"beng"
,"deva"
,"fullwide"
,"gujr"
,"guru"
,"hanidec"
,"khmr"
,"knda"
,"laoo"
,"latn"
,"limb"
,"mlym"
,"mong"
,"mymr"
,"orya"
,"tamldec"
,"telu"
,"thai"
,"tibt"
. localeMatcher
-
The locale matching algorithm to use. Possible values are
"lookup"
and"best fit"
; the default is"best fit"
. For information about this option, see the Intl page. timeZone
-
The time zone to use. The only value implementations must recognize is
"UTC"
; the default is the runtime's default time zone. Implementations may also recognize the time zone names of the IANA time zone database, such as"Asia/Shanghai"
,"Asia/Kolkata"
,"America/New_York"
. hour12
-
Whether to use 12-hour time (as opposed to 24-hour time). Possible values are
true
andfalse
; the default is locale dependent. This option overrides thehc
language tag and/or thehourCycle
option in case both are present. hourCycle
-
The hour cycle to use. Possible values are
"h11"
,"h12"
,"h23"
, or"h24"
. This option overrides thehc
language tag, if both are present, and thehour12
option takes precedence in case both options have been specified. formatMatcher
-
The format matching algorithm to use. Possible values are
"basic"
and"best fit"
; the default is"best fit"
. See the following paragraphs for information about the use of this property.
The following properties describe the date-time components to use in formatted output, and their desired representations. Implementations are required to support at least the following subsets:
-
weekday
,year
,month
,day
,hour
,minute
,second
-
weekday
,year
,month
,day
year
,month
,day
year
,month
month
,day
hour
,minute
,second
hour
,minute
Implementations may support other subsets, and requests will be negotiated against all available subset-representation combinations to find the best match. Two algorithms are available for this negotiation and selected by the
formatMatcher
property: A fully specified"basic"
algorithm and an implementation-dependent"best fit"
algorithm.weekday
-
The representation of the weekday. Possible values are:
"long"
(e.g.,Thursday
)"short"
(e.g.,Thu
)-
"narrow"
(e.g.,T
). Two weekdays may have the same narrow style for some locales (e.g.Tuesday
's narrow style is alsoT
).
era
-
The representation of the era. Possible values are:
"long"
(e.g.,Anno Domini
)"short"
(e.g.,AD
)"narrow"
(e.g.,A
)
year
-
The representation of the year. Possible values are:
"numeric"
(e.g.,2012
)"2-digit"
(e.g.,12
)
month
-
The representation of the month. Possible values are:
"numeric"
(e.g.,3
)"2-digit"
(e.g.,03
)"long"
(e.g.,March
)"short"
(e.g.,Mar
)-
"narrow"
(e.g.,M
). Two months may have the same narrow style for some locales (e.g.May
's narrow style is alsoM
).
day
-
The representation of the day. Possible values are:
"numeric"
(e.g.,1
)"2-digit"
(e.g.,01
)
hour
-
The representation of the hour. Possible values are
"numeric"
,"2-digit"
. minute
-
The representation of the minute. Possible values are
"numeric"
,"2-digit"
. second
-
The representation of the second. Possible values are
"numeric"
,"2-digit"
. fractionalSecondDigits
-
The number of digits used to represent fractions of a second (any additional digits are truncated). Possible values are:
-
1
(Fractional part represented as 1 digit. For example, 736 is formatted as7
.) -
2
(Fractional part represented as 2 digits. For example, 736 is formatted as73
.) -
3
(Fractional part represented as 3 digits. For example, 736 is formatted as736
.)
-
timeZoneName
-
The localized representation of the time zone name. Possible values are:
"long"
Long localized form (e.g.,Pacific Standard Time
,Nordamerikanische Westküsten-Normalzeit
)"short"
Short localized form (e.g.:PST
,GMT-8
)"shortOffset"
Short localized GMT format (e.g.,GMT-8
)"longOffset"
Long localized GMT format (e.g.,GMT-0800
)"shortGeneric"
Short generic non-location format (e.g.:PT
,Los Angeles Zeit
)."longGeneric"
Long generic non-location format (e.g.:Pacific Time
,Nordamerikanische Westküstenzeit
)
Note: Timezone display may fall back to another format if a required string is unavailable. For example, the non-location formats should display the timezone without a specific country/city location like "Pacific Time", but may fall back to a timezone like "Los Angeles Time".
The default value for each date-time component property is
undefined
, but if all component properties areundefined
, thenyear
,month
, andday
are assumed to be"numeric"
.
Return value
A new Intl.DateTimeFormat
object.
Note: The text below describes behavior that is marked by the specification as "optional". It may not work in all environments. Check the browser compatibility table.
Normally, Intl.DateTimeFormat()
can be called with or without new
, and a new Intl.DateTimeFormat
instance is returned in both cases. However, if the this
value is an object that is instanceof
Intl.DateTimeFormat
(doesn't necessarily mean it's created via new Intl.DateTimeFormat
; just that it has Intl.DateTimeFormat.prototype
in its prototype chain), then the value of this
is returned instead, with the newly created Intl.DateTimeFormat
object hidden in a [Symbol(IntlLegacyConstructedSymbol)]
property (a unique symbol that's reused between instances).
const formatter = Intl.DateTimeFormat.call(
{ __proto__: Intl.DateTimeFormat.prototype },
"en-US",
{ dateStyle: "full" },
);
console.log(Object.getOwnPropertyDescriptors(formatter));
// {
// [Symbol(IntlLegacyConstructedSymbol)]: {
// value: DateTimeFormat [Intl.DateTimeFormat] {},
// writable: false,
// enumerable: false,
// configurable: false
// }
// }
Note that there's only one actual Intl.DateTimeFormat
instance here: the one hidden in [Symbol(IntlLegacyConstructedSymbol)]
. Calling the format()
and resolvedOptions()
methods on formatter
would correctly use the options stored in that instance, but calling all other methods (e.g. formatRange()
) would fail: "TypeError: formatRange method called on incompatible Object", because those methods don't consult the hidden instance's options.
This behavior, called ChainDateTimeFormat
, does not happen when Intl.DateTimeFormat()
is called without new
but with this
set to anything else that's not an instanceof Intl.DateTimeFormat
. If you call it directly as Intl.DateTimeFormat()
, the this
value is Intl
, and a new Intl.DateTimeFormat
instance is created normally.
Examples
Using DateTimeFormat
In basic use without specifying a locale, DateTimeFormat
uses the default
locale and default options.
const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
// toLocaleString without arguments depends on the implementation,
// the default locale, and the default time zone
console.log(new Intl.DateTimeFormat().format(date));
// "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800)
Using timeStyle and dateStyle
const shortTime = new Intl.DateTimeFormat("en", {
timeStyle: "short",
});
console.log(shortTime.format(Date.now())); // "1:31 PM"
const shortDate = new Intl.DateTimeFormat("en", {
dateStyle: "short",
});
console.log(shortDate.format(Date.now())); // "07/07/20"
const mediumTime = new Intl.DateTimeFormat("en", {
timeStyle: "medium",
dateStyle: "short",
});
console.log(mediumTime.format(Date.now())); // "07/07/20, 1:31:55 PM"
Using dayPeriod
Use the dayPeriod
option to output a string for the times of day ("in the morning", "at night", "noon", etc.). Note, that this only works when formatting for a 12 hour clock (hourCycle: 'h12'
) and that for many locales the strings are the same irrespective of the value passed for the dayPeriod
.
const date = Date.UTC(2012, 11, 17, 4, 0, 42);
console.log(
new Intl.DateTimeFormat("en-GB", {
hour: "numeric",
hourCycle: "h12",
dayPeriod: "short",
timeZone: "UTC",
}).format(date),
);
// 4 at night" (same formatting in en-GB for all dayPeriod values)
console.log(
new Intl.DateTimeFormat("fr", {
hour: "numeric",
hourCycle: "h12",
dayPeriod: "narrow",
timeZone: "UTC",
}).format(date),
);
// "4 mat." (same output in French for both narrow/short dayPeriod)
console.log(
new Intl.DateTimeFormat("fr", {
hour: "numeric",
hourCycle: "h12",
dayPeriod: "long",
timeZone: "UTC",
}).format(date),
);
// "4 du matin"
Using timeZoneName
Use the timeZoneName
option to output a string for the timezone ("GMT", "Pacific Time", etc.).
const date = Date.UTC(2021, 11, 17, 3, 0, 42);
const timezoneNames = [
"short",
"long",
"shortOffset",
"longOffset",
"shortGeneric",
"longGeneric",
];
for (const zoneName of timezoneNames) {
// Do something with currentValue
const formatter = new Intl.DateTimeFormat("en-US", {
timeZone: "America/Los_Angeles",
timeZoneName: zoneName,
});
console.log(`${zoneName}: ${formatter.format(date)}`);
}
// Logs:
// short: 12/16/2021, PST
// long: 12/16/2021, Pacific Standard Time
// shortOffset: 12/16/2021, GMT-8
// longOffset: 12/16/2021, GMT-08:00
// shortGeneric: 12/16/2021, PT
// longGeneric: 12/16/2021, Pacific Time
Specifications
Specification |
---|
ECMAScript Internationalization API Specification # sec-intl-datetimeformat-constructor |
Browser compatibility
BCD tables only load in the browser