[Bug]: TimePicker selection is not working using useHour12 property on a browser displaying Japanese language.

[Gabnight-MS]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (36) x64 Intel(R) Xeon(R) CPU E5-2697 v4 @ 2.30GHz
    Memory: 34.72 GB / 63.92 GB
  Browsers:
    Chrome: 114.0.5735.199
    Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.67), ChromiumDev (116.0.1938.1)
    Internet Explorer: 11.0.19041.1566

Are you reporting Accessibility issue?

None

Reproduction

https://codepen.io/Gabnight/pen/rNQzjZJ

Bug Description

This issue can be reproduced when the browser's language display setting is set to Japanese.

Repro steps:

• Set your browser display language to Japanese
• Click on the time picker dropdown on demo website (https://developer.microsoft.com/en-us/fluentui#/controls/web/timepicker) or codepen attached to this bug.
• Select an hour

Actual Behavior

Nothing happened when you selected an hour.
The selected time message display "Invalid Date"

Expected Behavior

The selected time message displays the selected hour

Some early investigation:

1. The issue happened when you set the useHour12 property to true in the TimePicker.

<TimePicker
        placeholder="Basic example placeholder"
        styles={timePickerStyles}
        useHour12={true}
...

3. Keys of the dropdown list item are generated from "formatTimeString"

/**
 * Format a date object to a localized time string using the browser's default locale
 * @param date - Input date to format
 * @param showSeconds - Whether to show seconds in the formatted string
 * @param useHour12 - Whether to use 12-hour time
 */
export var formatTimeString = function (date, showSeconds, useHour12) {
    var localeTimeString = date.toLocaleTimeString([], {
        hour: 'numeric',
        minute: '2-digit',
        second: showSeconds ? '2-digit' : undefined,
        hour12: useHour12,
    });
    if (!useHour12 && localeTimeString.slice(0, 2) === '24') {
        localeTimeString = '00' + localeTimeString.slice(2);
    }
    return localeTimeString;
};

So, key is written with Japanese characters

new Date(23,1,1,0,32).toLocaleTimeString("ja", {
        hour: 'numeric',
        minute: '2-digit',
        hour12: true,
    });

'午前0:32'

4. Once dropdown item selected, the date is computed from the selected key:

/**
 * Returns a date object from the selected time.
 * @param useHour12 - If the time picker uses 12 or 24 hour formatting
 * @param dateStartAnchor - The baseline date to calculate the offset of the selected time
 * @param selectedTime - A string representing the user selected time
 * @returns A new date object offset from the baseDate using the selected time.
 */
export var getDateFromTimeSelection = function (useHour12, dateStartAnchor, selectedTime) {
    var _a = TimeConstants.TimeFormatRegex.exec(selectedTime) || [], selectedHours = _a[1], selectedMinutes = _a[2], selectedSeconds = _a[3], selectedAp = _a[4];
    var hours = +selectedHours;
...

With regex looking for am/pm int the key

export var TimeConstants = {
...
    /**
     * Matches a time string. Groups:
     * 1. hours (with or without leading 0)
     * 2. minutes
     * 3. seconds (optional)
     * 4. meridiem (am/pm, case-insensitive, optional)
     */
    TimeFormatRegex: /^(\d\d?):(\d\d):?(\d\d)? ?([ap]m)?/i,
};

And so, selectedHours and selectedMinutes are undefined

Logs

There is no info in the console.

Requested priority

Blocking

Products/sites affected

Microsoft/Power Automate

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[behowell]

Thank you for the detailed investigation! I've created PR #28469 to solve this issue.

[Gabnight-MS]

[like] Gabriel de Matos reacted to your message: