Html Input Time in 24 Format

HTML input time in 24 format

As stated in this answer not all browsers support the standard way. It is not a good idea to use for robust user experience. And if you use it, you cannot ask too much.

Instead use time-picker libraries. For example: TimePicker.js is a zero dependency and lightweight library. Use it like:

var timepicker = new TimePicker('time', {
lang: 'en',
theme: 'dark'
timepicker.on('change', function(evt) {

var value = (evt.hour || '00') + ':' + (evt.minute || '00');
evt.element.value = value;

<script src=""></script>
<link href="" rel="stylesheet"/>

<input type="text" id="time" placeholder="Time">

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

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">

Input type time show 12 hour format instead of 24

I solved it. Just changed localization to another country... very strage, but it works...

Html5 time input 24 hours

At the moment, HTML5 time format is 24-hour format.


If you are looking for 3rd party libraries with a little configuration to convert back and forth between 12 and 24 hour format or accept input in either/both, there are many out there. I use this component in production, currently. You may wish to create your own component or use different components/libraries.

Also, simple mathematics can be used to convert 12 to 24 hour time and vice versa, and you can find that easily by Googling - that is not going to change dependent on the browser.

Demos here:


Download as ZIP here:


I use this in conjunction with moment.js:


Related Topics

Leave a reply