feat(datetime): add support for h11 and h24 hour formats (#28219)

Issue number: resolves #23750

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Datetime does not support h11 and h24 hour formats

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Datetime supports h11 and h24 formats

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


Implementation Notes:

1. I broke up the `is24Hour` function into two functions:
- The first function, `is24Hour`, accepts an hour cycle and returns true
if the hourCycle preference uses a 24 hour format
- The second function, getHourCycle, accepts a locale and an optional
hour cycle and returns the computed hour cycle. I found that the hour
cycle is not always set via `hourCycle` (such as when we are using the
system default if it's specified in the `locale` prop using locale
extension tags). This was coupled to is24Hour, but I needed this
functionality elsewhere to add support for this feature, so I decided to
break the functions up.
2. We were using the hour cycle types in several places, so I decided to
create a shared `DatetimeHourCycle` to avoid accidental typos.
This commit is contained in:
Liam DeBeasi
2023-09-28 11:40:46 -04:00
committed by GitHub
parent d0d9e35c37
commit 597bc3f085
13 changed files with 332 additions and 72 deletions

View File

@ -34,3 +34,5 @@ export type DatetimeHighlightStyle =
export type DatetimeHighlight = { date: string } & DatetimeHighlightStyle;
export type DatetimeHighlightCallback = (dateIsoString: string) => DatetimeHighlightStyle | undefined;
export type DatetimeHourCycle = 'h11' | 'h12' | 'h23' | 'h24';