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

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

Answer 2

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>