[BUG] - Time Input wrong HourCycle

[timwirt]

NextUI Version

2.4.1

Describe the bug

When using the Time Input it should automatically change the Hour Cycle for the right Time Zone. The examples from the documentation also dont work for me.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. init a new TimeInput
2. set the value to a ZonedDateTime eg with parseAbsoluteToLocal
3. Or just look at the time input documentation

Expected behavior

E.g if i am in germany with the timezone gmt+2 (what is recognized correctly) the hourcycle should be 24 hours. The documentation says that this actually automatically selects the right one

Screenshots or Videos

Operating System Version

System: OS: win32 CPU: x64 Binaries: Node: v20.5.1

Browser

Chrome

[linear[bot]]

ENG-958 [BUG] - Time Input wrong HourCycle

[wingkwong]

Can you share the code same as your screenshot? The example looks fine on my side.

[timwirt]

As you can see gmt+2 is right (Europe/Berlin) but the hour cycle should be 24 hours and the times should be 09 and 17. Am I missing something obvious?

[wingkwong]

but i didn't see you specified hourCycle in your time input.

[timwirt]

This is from the documentation: By default, TimeInput displays times in either 12 or 24 hour hour format depending on the user's locale. However, this can be overridden using the hourCycle prop if needed for a specific usecase. This example forces TimeInput to use 24-hour time, regardless of the locale.

So for me it should automatically be 24 hours instead of 12 hours. It should adapt to the user's location.

[wingkwong]

@timwirt I got it now. can you help test two things -

1. try to set hourCycle to both 12 and 24, and share the result here.
2. try not to set hourCycle and test with other browsers.

[timwirt]

Ok,

1. manually setting the hourCycle works (but i think it is still not correct that is shows 11:00 it should be 09:00) (left one is 24h and right is 12h)
2. the behaviour is the same on edge and responsively app

[wingkwong]

• for the left one, 11 looks fine to me since your input is 2024-04-08T09:00:00Z. Z means UTC+0 so if you are in GMT+2 (p.s. there is no difference between UTC and GMT), so that would be 9 + 2 = 11.
• for the right one, please apply 24h and share the result.

[timwirt]

• for the left one, 11 looks fine to me since your input is 2024-04-08T09:00:00Z. Z means UTC+0 so if you are in GMT+2 (p.s. there is no difference between UTC and GMT), so that would be 9 + 2 = 11.

Ok, thank you.

Right also works.

[timwirt]

Ok with help of this Workaround from stackoverflow i can detect the hour cycle like this

const hourCycle = new Intl.DateTimeFormat(undefined, {
    hour: "numeric",
  })
    .format(new Date())
    .match(/AM/)
    ? 12
    : 24;

and now i just add to hourCycle={hourCycle} to the time input. 😁