html - How to change the time format (12/24 hours) of an <input>?

Question

I am using HTML5 input element with type=time. The problem is it shows time with 12 hours but I want it to show it in 24 hours a day. How can I make it to 24 hours?

Here is my input field:

<input type="time" name="time" placeholder="hrs:mins" pattern="^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$" class="inputs time" required>

Answer 1

HTML5 Time Input

This one 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 OS locale configuration. The value returned is in 24h hours:minutes format, which will look something like 14:30.

More details, including the appearance for each browser, can be found on MDN.

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