How to adjust the time format of the <input> element (12-hour or 24-hour)?

Question

I'm using an HTML5 input element with type=time. The problem is that it displays the time in 12 hour format, but I want it to display in 24 hour format. How do I set it to 24 hour time?

This is my input field:

< /pre>

Answer 1

According to the HTML5 draft, input type=time creates a control for entering the time of day, which is expected to be implemented using the "user's preferred display method". But in practice, this means using a widget that follows the browser's localization rules. Therefore, regardless of the language of the surrounding content, the display will change based on the language of the browser, the language of the underlying operating system, or the system-wide locale (depending on the browser). For example, using the Finnish version of Chrome, the widgets I see use the standard 24-hour clock. Your situation may vary.

Therefore, input type=time is based on an approach that leaves the idea of ​​localization entirely outside of the page author. This is intentional; this question has been raised a few times in HTML5 discussions, with no change (except perhaps a clarification of the text describing this behavior as expected).

Please note that input type=time does not allow the pattern and placeholder attributes. Also, it can be misleading if placeholder="hrs:mins" is implemented. When the browser's locale uses "." as the time separator, the user may need to enter 12.30 (using a period) instead of 12:30.

My conclusion is that on browsers that don't support the pattern attribute, one should use input type=text and use some JavaScript to check the correctness of the input.

Answer 2

HTML5 time input

This is the simplest of the date/time related types, allowing the user to select a time on a 24/12 hour clock, usually depending on the user's operating system locale. The value returned is in 24-hour hour:minute format and looks similar to 14:30.

More details, including how it looks in each browser, can be found on MDN.

<input type="time" name="time">