html5 input type time without AM-PM and with min-max

Question

How can i remove the AM=PM part at this input

<input type='time' min='1:30' max='2:30'>

Also, As you can see i tried to add the min and max as the time itself but didn't work, How can i make it work? And it keeps telling me "Enter a valid value" each time i try to submit it without AM-PM

Answer 1

.without_ampm::-webkit-datetime-edit-ampm-field {
   display: none;
 }
 input[type=time]::-webkit-clear-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   -o-appearance: none;
   -ms-appearance:none;
   appearance: none;
   margin: -10px; 
 }

<!--use step="1" to show seconds-->
   <input type="time" class="without_ampm"  />

Answer 2

Being as i see some aspects of the question were not addressed I'm adding the following answer.

In order for your min and max to work you need to have 2 digits for the hour

<input id="time" type="time" min='01:00' max= '03:00'>

This will output a time with AM enforced and only allow hours between 1am and 3am.

Also in order to pm just do

<input id="time" type="time" min='13:00' max= '15:00'>

This will output a time with PM enforced and only allow hours between 1PM and 3PM.

Answer 3

Use a custom input time, beause:

• some browsers cannot handle input type time, in which case it degraded gracefully into input type text, but without any features
• input type time looks different on each browser
• html5 offers flexible input validation, which is better supported than input type time
• it sounds like you want a duration instead of a time.

Here is a suggestion using input type text and input validation:

<input type="text" name="duration" id="durationForm" maxlength=8 pattern="^((\d+:)?\d+:)?\d*$"
    title="The amount of seconds, optionally preceded by 
           &quot;minutes:&quot; or by &quot;hours:minutes:&quot; 
           (empty or zero leads to an infinite duration)."
    placeholder="hh:mm:ss (empty for infinite duration)" size=30>

And a suggestion how you can process the input in JavaScript (note that durationFormValue 121, "2:01" and "1:61" are all valid and yield the same result):

// two or more digits, to be more precise (might get relevant for durations >= 100h)
var twoDigits = function (oneTwoDigits) {
    if (oneTwoDigits < 10) {oneTwoDigits = "0" + oneTwoDigits}; 
    return oneTwoDigits;
}

var Time = function (durationFormValue) {
    var hmsString = String(durationFormValue);
    var hms = hmsString.match(/^(?:(?:(\d+)\:)?(\d+)\:)?(\d+)$/);
    if (hms === null) {
        throw new TypeError("Parameter " + hmsString + 
                            " must have the format ((int+:)?int+:)?int+");
    }
    var hoursNumber = +hms[1] || 0;
    var minutesNumber = +hms[2] || 0;
    var secondsNumber = +hms[3] || 0;
    this.seconds = twoDigits(secondsNumber % 60);
    minutesNumber += Math.floor(secondsNumber / 60);
    this.minutes = twoDigits(minutesNumber % 60);
    hoursNumber += Math.floor(minutesNumber / 60);
    this.hours = twoDigits(hoursNumber);
};

Time.prototype.equals = function (otherTime) {
    return (this.hours === otherTime.hours) &&    
       (this.minutes === otherTime.minutes) &&
           (this.seconds === otherTime.seconds);
};    

Time.prototype.toString = function () {
    return this.hours + ":" + this.minutes + ":" + this.seconds;
}

Answer 4

It is not possible without AM-PM. You should use custom input time to do this work.

Use BootStrap TimePicker control to do this

Answer 5

Simply add the attribute value with a default time contain seconds or add seconds to the min and max attribute.

<input type='time' min='01:30:01' max='02:30:02' >