'How to create a HTML input that only accepts 4 digit numeric input that is between 0000-2399

I want to create an html input that takes in a 4 digit input that is between 0000 and 2399 (military time).

The problem is that 0000 is equal to 0 meaning that anything lower than 1000 will become less than 4 digits. I want to maintain the military time format. I have tried pattern = "[0-9]{4}" but that only applies for input type = "text" and I cannot do a min or a max for that input type.

Here are my failed attempts using both pattern and min max:

<input type = "number" name = "military_time" pattern= "[0-9]{4}" min = "0000" max = "2399">

<input type = "number" name = "military_time" min = "0000" max = "2399">

<input type = "number" name = "military_time" pattern= "[0-9]{4}" min = "0000" max = "2399">

I have a feeling the answer requires Javascript, but if there is another solution that only requires html (or Coldfusion) that will be preferred.

htmlinput


Solution 1:[1]

To limit input to the 24 hour clock you should use a pattern like

pattern="([01][0-9]|2[0-3])[0-5][0-9]"

This will take care of the fact that not all digits are allowed in the four positions.

Solution 2:[2]

Well I would use the pattern attribute, as a regular expression, like so:

 <input type="text" name="time_24" pattern="[00-23]{2}:[00-59]{2}" >

Solution 3:[3]

Maybe

input:valid {
  color: green;
}
input:invalid {
  color: red;
}
<form name="form1"> 
 <input type="text"  name="pincode" maxlength="4"  id="pin" pattern="\d{4}" required/>
 <input type="Submit"/> 
</form>

Solution 4:[4]

Fiddle here

Try this way may be its help for you

<form>
  <input type="number" name="quantity" min="0000" max="2399">
  <input type="submit">
</form>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Carsten Massmann
Solution 2 drtechno
Solution 3 Joe
Solution 4 Joe

Related Questions