Skip to content

Commit

Permalink
Clarification on interactions between hourCycle and dayPeriod (#28109)
Browse files Browse the repository at this point in the history
updated Intl.DateTimeFormat constructor to clarify that hourCycle: `h11` option will allow dayPeriod to be shown

Previous wording implied that dayPeriod is only used if `(hourCycle: 'h12')` option is set, updated to reflect that `dayPeriod` is displayed if either `{hourCycle: 'h12'` or `(hourCycle: 'h11')` are set. See below:

```const date = new Date(Date.UTC(2020, 11, 20, 18, 23, 16, 738));
// Results below assume UTC timezone - your results may vary

console.log(new Intl.DateTimeFormat('en-US', {hourCycle: 'h11', hour: '2-digit', dayPeriod: 'long'}).format(date))
console.log(new Intl.DateTimeFormat('en-US', {hourCycle: 'h12', hour: '2-digit', dayPeriod: 'long'}).format(date))
console.log(new Intl.DateTimeFormat('en-US', {hourCycle: 'h23', hour: '2-digit', dayPeriod: 'long'}).format(date))
console.log(new Intl.DateTimeFormat('en-US', {hourCycle: 'h24', hour: '2-digit', dayPeriod: 'long'}).format(date))

// output: 
// > "10 in the morning" 
// > "10 in the morning"
// > "10" 
// > "10"```
  • Loading branch information
ben-allen authored Jul 22, 2023
1 parent 8c4e47c commit 0fc401a
Showing 1 changed file with 2 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ Intl.DateTimeFormat(locales, options)

> **Note:**
>
> - This option only has an effect if a 12-hour clock is used.
> - This option only has an effect if a 12-hour clock (`hourCycle: 'h12'` or `hourCycle: 'h11'`) is used.
> - Many locales use the same string irrespective of the width specified.
- `numberingSystem`
Expand Down Expand Up @@ -316,7 +316,7 @@ 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`.
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'` or `hourCycle: 'h11'`) and that for many locales the strings are the same irrespective of the value passed for the `dayPeriod`.

```js
const date = Date.UTC(2012, 11, 17, 4, 0, 42);
Expand Down

0 comments on commit 0fc401a

Please sign in to comment.