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

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>

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

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.

I know this question has been answered many times, I just propose to people that might be interested a jquery Plugin :

https://github.com/fenix92/clickClock

very basic, clear and intuitive.

(demo : http://www.clamart-natation.com/clickclock/)

By HTML5 drafts, input type=time creates a control for time of the day input, expected to be implemented using “the user’s preferred presentation”. But this really means using a widget where time presentation follows the rules of the browser’s locale. So independently of the language of the surrounding content, the presentation varies by the language of the browser, the language of the underlying operating system, or the system-wide locale settings (depending on browser). For example, using a Finnish-language version of Chrome, I see the widget as using the standard 24-hour clock. Your mileage will vary.

Thus, input type=time are based on an idea of localization that takes it all out of the hands of the page author. This is intentional; the problem has been raised in HTML5 discussions several times, with the same outcome: no change. (Except possibly added clarifications to the text, making this behavior described as intended.)

Note that pattern and placeholder attributes are not allowed in input type=time. And placeholder="hrs:mins", if it were implemented, would be potentially misleading. It’s quite possible that the user has to type 12.30 (with a period) and not 12:30, when the browser locale uses “.” as a separator in times.

My conclusion is that you should use input type=text, with pattern attribute and with some JavaScript that checks the input for correctness on browsers that do not support the pattern attribute natively.

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

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.

Simple HTML trick to get this :

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<div class="row" >_x000D_
                       _x000D_
                        <div class="col-md-6">_x000D_
                             <div class="row">_x000D_
                                <div class="col-md-4" >_x000D_
                                       <label for="hours">Hours</label>_x000D_
          <select class="form-control" required>_x000D_
                <option>  </option>_x000D_
                <option value="1"> 1 </option>_x000D_
                <option value="2"> 2 </option>_x000D_
                <option value="3"> 3 </option>_x000D_
                <option value="4"> 4 </option>_x000D_
                <option value="5"> 5 </option>_x000D_
                <option value="6"> 6 </option>_x000D_
                <option value="7"> 7 </option>_x000D_
                <option value="8"> 8 </option>_x000D_
                <option value="9"> 9 </option>_x000D_
                <option value="10"> 10 </option>_x000D_
                <option value="11"> 11 </option>_x000D_
                <option value="12"> 12 </option>_x000D_
              </select>_x000D_
             </div>_x000D_
                <div class="col-md-4" >_x000D_
                      <label for="minutes">Minutes</label>_x000D_
              <select class="form-control" required="">_x000D_
                <option selected disabled>  </option>_x000D_
                <option value="00"> 00 </option>_x000D_
                <option value="10"> 10 </option>_x000D_
                <option value="20"> 20 </option>_x000D_
                <option value="30"> 30 </option>_x000D_
                <option value="40"> 40 </option>_x000D_
                <option value="50"> 50 </option>_x000D_
              </select>_x000D_
             </div>_x000D_
                 <div class="col-md-4" >_x000D_
                       <label for="hours">Select Meridiem</label>_x000D_
              <select class="form-control" required="" >_x000D_
                <option selected="" value="AM"> AM </option>_x000D_
                <option value="PM"> PM </option>_x000D_
              </select>_x000D_
              </div>_x000D_
             </div></div>_x000D_
                    </div>

If you are able/willing to use a tiny component I wrote this Timepicker — https://github.com/jonataswalker/timepicker.js — for my own needs.

Usage is like this:

var timepicker = new TimePicker('time', {_x000D_
  lang: 'en',_x000D_
  theme: 'dark'_x000D_
});_x000D_
_x000D_
var input = document.getElementById('time');_x000D_
_x000D_
timepicker.on('change', function(evt) {_x000D_
  _x000D_
  var value = (evt.hour || '00') + ':' + (evt.minute || '00');_x000D_
  evt.element.value = value;_x000D_
_x000D_
});

body {_x000D_
  font: 1.2em/1.3 sans-serif;_x000D_
  color: #222;_x000D_
  font-weight: 400;_x000D_
  padding: 5px;_x000D_
  margin: 0;_x000D_
  background: linear-gradient(#efefef, #999) fixed;_x000D_
}_x000D_
input {_x000D_
  padding: 5px 0;_x000D_
  font-size: 1.5em;_x000D_
  font-family: inherit;_x000D_
  width: 100px;_x000D_
}

<script src="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>_x000D_
<link href="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/>_x000D_
_x000D_
<div>_x000D_
  <input type="text" id="time" placeholder="Time">_x000D_
</div>

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).

you can try this for html side

<label for="appointment-time">Choose Time</label>
<input class="form-control" type="time" ng-model="time" ng-change="ChangeTime()" />
<label class="form-control" >{{displayTime}}</label>

JavaScript Side

function addMinutes(time/*"hh:mm"*/, minsToAdd/*"N"*/) 
{
        function z(n)
        {
           return (n<10? '0':'') + n;
        }
        var bits = time.split(':');
        var mins = bits[0]*60 + (+bits[1]) + (+minsToAdd);
        return z(mins%(24*60)/60 | 0) + ':' + z(mins%60); 
 }  

 $scope.ChangeTime=function()
 {
      var d = new Date($scope.time);
      var hours=d.getHours();
      var minutes=Math.round(d.getMinutes());
      var ampm = hours >= 12 ? 'PM' : 'AM';
      var Time=hours+':'+minutes;
      var DisplayTime=addMinutes(Time, duration);
      $scope.displayTime=Time+' - '+DisplayTime +' '+ampm;
 }