CODEWITHSUNDEEP
html
Vikas Singh
Vikas Singh

Reputation: 3018

HTML input time in 24 hour format

I am using below HTML tag:

<input type="time" />

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

Upvotes: 104

Views: 312541

Answers (8)

user27907855
user27907855

Reputation: 1

You can just enter Min and Max, that worked for me

Upvotes: 0

Sheryar Ahmed
Sheryar Ahmed

Reputation: 15

Just add in the element step="2", it will automatically send the values to be in AM/PM format. reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#step

Upvotes: -1

otmane tahri
otmane tahri

Reputation: 1

To create an input field that specifically captures time in the format of (HH:MM) :

function validateTimeInput(input) {
      var regex = /^([01][0-9]|2[0-3]):[0-5][0-9]$/; // Regular expression for HH:MM format
      if (!regex.test(input.value)) {
        alert("Please enter time in HH:MM .");
        input.value = ""; // Clear the input field if the format is incorrect
      }
    }
<!DOCTYPE html>
<html>
<head>
  <title>Time Input (HH:MM)</title>

</head>
<body>
  <div class="container mt-4">
    <form>
      <label for="timeInput">Choose time (HH:MM):</label>
      <input type="text" class="form-control" id="timeInput" name="timeInput" 
             placeholder="HH:MM" onblur="validateTimeInput(this)" required>
      <small>Format: HH:MM (24-hour format)</small>
      <br>
      <button type="submit" class="btn btn-primary mt-2">Submit</button>
    </form>
  </div>
</body>
</html>

Upvotes: 0

Cyrille
Cyrille

Reputation: 3597

While it may seem desirable to have this ability, to hard-code 12 or 24 hour format as input, it's actually a bad idea. Users have preferences, typically associated with country and region.

This is why the <input> elements of type time "uses a 12- or 24-hour format for inputting times, based on system locale." (MDN)

So, actually, you don't need to worry about this (much) as the user will (likely) be provided the appropriate 12/24 format as needed (most of the time).

To answer the question directly then, just change your system locale.

Upvotes: 0

Gokhan Kurt
Gokhan Kurt

Reputation: 8277

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

Upvotes: 38

Abid_niazi_15
Abid_niazi_15

Reputation: 865

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.

Upvotes: 3

Vikas NS
Vikas NS

Reputation: 438

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

Upvotes: 12

Bill Gauvey
Bill Gauvey

Reputation: 105

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.

Upvotes: 5

Related Questions