We support dayPeriod in date-time formatting now only in nightly, because of ICU/CLDR issues. Some of those were fixed by the update to 67. It looks like bug 1636984's concerns are the only remaining issues to fix still before we do this.

Filing a fresh bug for PR tracking purposes...

Looks like bug 1636984 is fixed now.

There are still some open review issues in the spec PR, though.

"dayPeriod" support was added in bug 1569103, this patch just enables it by default.

These features have shipped, so we can remove the "release_or_beta" flags.

Depends on D115608

Depends on D115609

https://hg.mozilla.org/mozilla-central/rev/ba69a44bcef5
https://hg.mozilla.org/mozilla-central/rev/43f5e887e19a
https://hg.mozilla.org/mozilla-central/rev/0a003fecf98d

Firefox 90 docs work for this can be tracked in: https://github.com/mdn/content/issues/5382

I tested the existing docs in Firefox 91 using this code:

var date = Date.UTC(2012, 11, 17, 20, 0, 42);
console.log(new Intl.DateTimeFormat('en-GB', { dayPeriod: 'narrow' }).format(date));
console.log(new Intl.DateTimeFormat('en-GB', { dayPeriod: 'short' }).format(date));
console.log(new Intl.DateTimeFormat('en-GB', { dayPeriod: 'long' }).format(date));

All three lines output "in the morning". If I change the time I can get "in the afternoon".

Shouldn't narrow, short and long options emit something different?

The docs indicate: "AM", "PM", "in the morning", or "noon" but would be good to understand whether I'm using this wrong, and how you would get the other options.

The CLDR sources for English don't provide any abbreviations. It looks like the data for French (among others) has abbreviated names:

js> var date = Date.UTC(2012, 11, 17, 16, 0, 42);
js> console.log(new Intl.DateTimeFormat('fr', { dayPeriod: 'narrow', timeZone: 'UTC' }).format(date));
ap.m.
js> console.log(new Intl.DateTimeFormat('fr', { dayPeriod: 'short', timeZone: 'UTC' }).format(date));
ap.m.
js> console.log(new Intl.DateTimeFormat('fr', { dayPeriod: 'long', timeZone: 'UTC' }).format(date));
de l’après-midi

It seems like UTS even states that for many locales "[...] there is only one width that is customarily used".

For MDN it's probably also worth noting that dayPeriod (unless used in stand-alone contexts) only has an effect if a 12-hour clock is used. For example:

js> console.log(new Intl.DateTimeFormat('fr', { hour: 'numeric', dayPeriod: 'long', timeZone: 'UTC' }).format(date));
16 h
js> console.log(new Intl.DateTimeFormat('fr', { hour: 'numeric', hourCycle: 'h12', dayPeriod: 'long', timeZone: 'UTC' }).format(date));
4 de l’après-midi

HTH,
André

Thanks very much Andre - yes it does help a lot.

FYI, all pending review but:

• Docs done in https://github.com/mdn/content/pull/5776
• Release noted done in https://github.com/mdn/content/pull/5748
• BCD done in https://github.com/mdn/browser-compat-data/pull/10807

I will add dev-docs-complete too.