95

I am using below HTML tag:

<input type="time"  />

In Chrome, Its showing PM/AM format, can we restrict to display 24 format always. I dont want to use HTML5 tag

Vikas Singh
  • 2,838
  • 5
  • 17
  • 32
  • 1
    Maybe [this](http://stackoverflow.com/questions/14772142/24-hour-time-regex-for-html-5) post could be helpful. – Monika X Sep 16 '15 at 13:12
  • 1
    It seems that `type=time` is 'still' in draft mode. see this question http://stackoverflow.com/questions/31829783/in-different-browsers-input-time-field-shows-in-different-formats – Kristijan Iliev Sep 16 '15 at 13:12
  • Since it is a quite new element, and relying on different user-agent may change the result of this element, there is at my knowledge no attribute to specify format date. Instead, I find something around `max` and `min` value for this element. Maybe you should give it a try and see what happens when setting max to `24:00`. More information [here](http://www.w3schools.com/jsref/prop_input_time_max.asp) – Anwar Sep 16 '15 at 13:13
  • 3
    input-time display depends on the OS setting. Only users that selected a 24h clock on their device will see it as a 24h format input. Chrome on Win10 requires restart to update time format from OS. – oriadam Jul 01 '18 at 13:19
  • 9
    I'm using a machine with 24h clock and it's still showing me AM/PM which I don't want. How can I remove the AM/PM? –  Aug 15 '18 at 07:29

4 Answers4

38

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="https://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/>

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

More info about the time input can be found on MDN Web Docs

Gokhan Kurt
  • 8,239
  • 1
  • 27
  • 51
  • 23
    Reason for Down vote . Note : Want some Natural Answer For this question. Also it could have been done using other library but question wants natural ans without library , Please read yellow section. – vijay Nov 12 '16 at 08:52
  • 1
    hi, in your sample is there a way to prevent the user from typing other text... right now he is able to type non numeric items! – Transformer Apr 02 '17 at 16:24
  • how to use it more than once, or for 2 controllers? Thanks – hassanzi Jul 02 '18 at 14:35
  • 1
    @Hassan The first argument for TimePicker constructor denotes the 'id' for the element to be augmented. You can use it for different ids on a single page. – Gokhan Kurt Jul 02 '18 at 21:55
11

<!DOCTYPE html>
<html>
    <body>
        Time: <input type="time" id="myTime" value="16:32:55">

 <p>Click the button to get the time of the time field.</p>

 <button onclick="myFunction()">Try it</button>

 <p id="demo"></p>

 <script>
     function myFunction() {
         var x = document.getElementById("myTime").value;
         document.getElementById("demo").innerHTML = x;
     }
 </script>
    </body>
</html>

I found that by setting value field (not just what is given below) time input will be internally converted into the 24hr format.

ikaikastine
  • 601
  • 8
  • 22
Vikas NS
  • 408
  • 5
  • 19
  • Is it true in all browsers? Internal format is always 24 hours? – gregn3 Feb 03 '19 at 14:43
  • 2
    Internal format is always 24 hours, according to [this](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#Time_value_format) – gregn3 Feb 03 '19 at 14:49
  • Doesn't work in safari: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time – zeekrey Aug 03 '20 at 11:22
  • 3
    In Chrome & Firefox this is presented as a "am/pm" time input control. So this answer is (no longer) working. It doesn't display/interact in a "24-hour fashion". – Youp Bernoulli Sep 24 '20 at 07:33
4

You can't do it with the HTML5 input type. There are many libs available to do it, you can use momentjs or some other jQuery UI components for the best outcome.

Bill Gauvey
  • 95
  • 1
  • 5
3

In my case, it is taking time in AM and PM but sending data in 00-24 hours format to the server on form submit. and when use that DB data in its value then it will automatically select the appropriate AM or PM to edit form value.

Abid_niazi_15
  • 825
  • 8
  • 6