0

I use a time input in my website. It works 24 hours format according my system setting.

I try to use browser mobile mode, also works 24 hours.

But when I use a mobile phone to test, the time control shows in 24 hours mode, but when you click time set, the input text box will shown as 12 hours mode(my phone has set 24 hours format).

e.g. My contorl shows 24-hour format (not AM|PM), I select time 13:16 by control, the text box will shown as 1:16 PM.

Are there any methonds force it shows in 24 hours format?

<form>
    ...
    <input type="time" ... />
</form>

I have read MDN documents abount <input type="time" ...>. But the problem is my test phone has 24-hour format local setting.

I have try to modify my mobile browser user-agent (in four different browsers). It always shows in 12-hour format, and one of them also shows second but mistooken show PM as AM.

I take a test by setting my moblie local time setting to 12-hour format, the contorl will turn to 12-hour format (ask me to choose AM or PM). And UI is the same.

The value of the time input is always in 24-hour format that includes leading zeros: hh:mm, regardless of the input format, which is likely to be selected based on the user's locale (or by the user agent).

Jun Yu
  • 375
  • 1
  • 5
  • 21
  • Web-browsers use the user's locale/culture settings for their presentation UI. The `value` in the DOM will always be in ISO 8601 format. But you cannot override the presentation UI format, to my knowledge. – Dai Nov 19 '21 at 05:22
  • @Dai but my test phone's locale setting is 24 hours format, why it will shown as 12 hours format? – Jun Yu Nov 19 '21 at 05:26
  • This might help, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#time_value_format – Hemal Nov 19 '21 at 05:29
  • @Hemal Thank you. I have read this before post this question. It points display based on user local or user agent. But my user local setting is 12 hours format. – Jun Yu Nov 19 '21 at 06:07
  • What browser are you using, exactly? – Dai Nov 19 '21 at 07:31
  • @fish-404, This link with another answer might help on this. https://stackoverflow.com/a/14772165/2270492 – Hemal Nov 19 '21 at 08:53
  • @Hemal That answer is from 2013 and uses `` which defeats the point of using modern HTML5 `` inputs, especially w.r.t. iOS and Android soft-keyboard support for different input types. – Dai Nov 19 '21 at 09:40
  • @Hemal Thank you. Actually, I have read this. And my form use this `` now, but I think `` can give user better experience, since it can pop up a time widget only. – Jun Yu Nov 22 '21 at 00:39
  • @Dai My test phone only has some Chinese browsers, like UC, QQ, XiaoMi browsers... Today I try to install a firefox to test, it also show the same behaviour, with AM/PM, and the time control is shown a clock style. Other browsers shown with a digit clock style. – Jun Yu Nov 22 '21 at 01:48

0 Answers0