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.

core/src/components/datetime-button/datetime-button.tsx

@@ -9,7 +9,7 @@ import type { Color } from '../../interface';
 import type { DatetimePresentation } from '../datetime/datetime-interface';
 import { getToday } from '../datetime/utils/data';
 import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';
-import { is24Hour } from '../datetime/utils/helpers';
+import { getHourCycle } from '../datetime/utils/helpers';
 import { parseDate } from '../datetime/utils/parse';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -218,7 +218,7 @@ export class DatetimeButton implements ComponentInterface {
      * warning in the console.
      */
     const firstParsedDatetime = parsedDatetimes[0];
-    const use24Hour = is24Hour(locale, hourCycle);
+    const computedHourCycle = getHourCycle(locale, hourCycle);
 
     this.dateText = this.timeText = undefined;
 
@@ -226,7 +226,7 @@ export class DatetimeButton implements ComponentInterface {
       case 'date-time':
       case 'time-date':
         const dateText = getMonthDayAndYear(locale, firstParsedDatetime);
-        const timeText = getLocalizedTime(locale, firstParsedDatetime, use24Hour);
+        const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
         if (preferWheel) {
           this.dateText = `${dateText} ${timeText}`;
         } else {
@@ -250,7 +250,7 @@ export class DatetimeButton implements ComponentInterface {
         }
         break;
       case 'time':
-        this.timeText = getLocalizedTime(locale, firstParsedDatetime, use24Hour);
+        this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
         break;
       case 'month-year':
         this.dateText = getMonthAndYear(locale, firstParsedDatetime);