How to change the time format 12 24 hours of an input

Question

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   x000D   x000D   lt 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 gt  x000D   x000D   x000D

User · Answer

Simple HTML trick to get this        x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  rel  stylesheet   gt  x000D   lt div class  row   gt  x000D                          x000D                           lt div class  col-md-6  gt  x000D                                lt div class  row  gt  x000D                                   lt div class  col-md-4   gt  x000D                                          lt label for  hours  gt Hours lt  label gt  x000D             lt select class  form-control  required gt  x000D                   lt option gt    lt  option gt  x000D                   lt option value  1  gt  1  lt  option gt  x000D                   lt option value  2  gt  2  lt  option gt  x000D                   lt option value  3  gt  3  lt  option gt  x000D                   lt option value  4  gt  4  lt  option gt  x000D                   lt option value  5  gt  5  lt  option gt  x000D                   lt option value  6  gt  6  lt  option gt  x000D                   lt option value  7  gt  7  lt  option gt  x000D                   lt option value  8  gt  8  lt  option gt  x000D                   lt option value  9  gt  9  lt  option gt  x000D                   lt option value  10  gt  10  lt  option gt  x000D                   lt option value  11  gt  11  lt  option gt  x000D                   lt option value  12  gt  12  lt  option gt  x000D                 lt  select gt  x000D                lt  div gt  x000D                   lt div class  col-md-4   gt  x000D                         lt label for  minutes  gt Minutes lt  label gt  x000D                 lt select class  form-control  required    gt  x000D                   lt option selected disabled gt    lt  option gt  x000D                   lt option value  00  gt  00  lt  option gt  x000D                   lt option value  10  gt  10  lt  option gt  x000D                   lt option value  20  gt  20  lt  option gt  x000D                   lt option value  30  gt  30  lt  option gt  x000D                   lt option value  40  gt  40  lt  option gt  x000D                   lt option value  50  gt  50  lt  option gt  x000D                 lt  select gt  x000D                lt  div gt  x000D                    lt div class  col-md-4   gt  x000D                          lt label for  hours  gt Select Meridiem lt  label gt  x000D                 lt select class  form-control  required     gt  x000D                   lt option selected    value  AM  gt  AM  lt  option gt  x000D                   lt option value  PM  gt  PM  lt  option gt  x000D                 lt  select gt  x000D                 lt  div gt  x000D                lt  div gt  lt  div gt  x000D                       lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

HTML provide only input type  quot time quot  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

User · Answer

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

User · Answer

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  lt input type  time  gt  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

User · Answer

you can try this for  html side   lt label for  appointment-time  gt Choose Time lt  label gt   lt input class  form-control  type  time  ng-model  time  ng-change  ChangeTime      gt   lt label class  form-control   gt   displayTime   lt  label gt    JavaScript Side  function addMinutes time   hh mm     minsToAdd   N                function z n                       return  n lt 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  gt   12    PM     AM         var Time hours     minutes        var DisplayTime addMinutes Time  duration          scope displayTime Time   -   DisplayTime      ampm

User · Answer

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

User · Answer

If you are able willing to use a tiny component I wrote this Timepicker   mdash  https   github com jonataswalker timepicker js  mdash  for my own needs   Usage is like this    x000D   x000D  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      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    x000D   lt script src  http   cdn jsdelivr net timepicker js latest timepicker min js  gt  lt  script gt  x000D   lt link href  http   cdn jsdelivr net timepicker js latest timepicker min css  rel  stylesheet   gt  x000D   x000D   lt div gt  x000D     lt input type  text  id  time  placeholder  Time  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D   lt input type  time  name  time    gt  x000D   x000D   x000D

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

Examples related to html