I'm implementing a datetime selector for events taking place mostly in the evening. The audience is mostly based in the US, but there might be international users as well, so I followed this suggestion of providing a 24-hour time picker (like this one from Material UI) for clarity.

24-hour datetime selector

However, some casual testing has revealed that US-based friends would choose 6AM when they meant 6PM. The sample size is small, but one pointed out that the hours after 12 are also smaller and inside the other circling, suggesting they'd be secondary, more like minutes to select after selecting the hour. In reality, hours should have equal emphasis from 0 to 23, and actually evening times should be emphasized since these events would take place in the evening.

What would be a clearer way to provide a time selector? AM/PM indicators instead? I'm afraid those may not be as common in some locales, while the 24-hour clock is universally understood, even if less used in the US.

  • What language/framework are you using? Far as I'm concerned, the input should change and adapt based on the user locale(24 for international, AM/PM for US), this of course considering you're using something native or React Material components(Since you mentioned Material). – Nick LeBlanc Jun 14 '20 at 0:10
  • On additional note, I just tested with Native and HTML5 inputting, they both change based on the device locale, on both iOS and Android. – Nick LeBlanc Jun 14 '20 at 0:12
  • @NickLeBlanc: React + MUI. I'm all for native controls, but I want to restrict the input minutes to multiples of 15, and that doesn't seem possible with the native control. – Dan Dascalescu Jun 14 '20 at 0:22
  • Technically speaking, it its, it's been around for quite some time, it's the 'step' attribute, nothing stops the user from selecting invalid inputs, but on submission the native validation will trigger an error. Is the issue you linked already fixed? If native is not really possible, you can always create your own component, a simple if with the user locale and the ampm={false} prop should do the trick. – Nick LeBlanc Jun 14 '20 at 0:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.