html5 time inputs shows 12 hours

Question

I am using html 5 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>

DEMO

Here is jsfiddle

Answer 1

It depends on the time format of the user's operating system when the web browser was launched.

So:

• If your computer's system prefs are set to use a 24-hour clock, the browser will render the <input type="time"> element as --:-- (time range: 00:00–23:59).
• If you change your computer's syst prefs to use 12-hour, the output won't change until you quit and relaunch the browser. Then it will change to --:-- -- (time range: 12:00 AM – 11:59 PM).

And (as of this writing), browser support is only about 75% (caniuse). Yay: Edge, Chrome, Opera, Android. Boo: IE, Firefox, Safari).

Answer 2

Its depends on your local system time settings, make 24 hours then it will show you 24 hours time.

Answer 3

Even though you see the time in HH:MM AM/PM format, on the backend it still works in 24 hour format, you can try using some basic javascript to see that.

Answer 4

HTML provide only input type="time" If you are using bootstrap then you can use timepicker. You can get code from this URL http://jdewit.github.io/bootstrap-timepicker May be it will help you

Answer 5

HTML5 Time Input

This one is the simplest of the date/time related types, allowing the user to select a time on a 24 hour clock, no AM or PM. The value returned is hours:minutes which will look something like 14:30.

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

---

This feature is still in draft. Each browser shows it differently.

- Opera (Presto Engine) shows it the right way.
- Chrome (Webkit Engine) shows it in AM/PM.
- Firefox (Gecko Engine) doesn't show anything, but validates.
- Edge shows all required values in a popover type window

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

Not a good idea to use!

Answer 6

Support of this type is still very poor. Opera shows it in a way you want. Chrome 23 shows it with seconds and AM/PM, in 24 version (dev branch at this moment) it will rid of seconds (if possible), but no information about AM/PM.
It's not want you possibly want, but at this point the only option I see to achieve your time picker format is usage of javascript.