Input type time 24 hour format

Question

Too many this type of old questions are already in Stack Overflow, but now I would like to know any new method to fix this problem!

 <input type="time">

How can we change this 12hr to 24hr format for all browsers? It would be great this will work with only JavaScript and without any third party JS/Jquery. Can any one help?

Referenced questions:

HTML input time in 24 format

html5 time inputs shows 12 hours

Answer 1

Try This Using time-picker libraries. For example: DateTimePicker.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="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script> <link href="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/> <div> <input type="text" id="time" placeholder="Time"> </div> 

Answer 2

From documentation :

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

So you need to change locale to get in 24hrs format.

That came to mind when I opened your same question on 2 different laptops. One is showing 24hrs format and other is showing 12hrs format.

You need to set locale in your project which has 24hrs format.

Example: 'ja-JP' , 'en-GB' has 24hrs format