[BUG] - Time Input wrong HourCycle about nextui

[linear]

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. 😁