web-dev-qa-db-de.com

html5 eingabetyp zeit ohne AM-PM und mit min-max

Wie kann ich den AM=PM-Teil an dieser Eingabe entfernen?

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

Wie Sie sehen können, habe ich versucht, die Variable min und max als Zeit selbst hinzuzufügen, hat aber nicht funktioniert. Wie kann ich es funktionieren lassen? Und es sagt mir immer "Enter a valid value" jedes Mal, wenn ich versuche, es ohne AM-PM zu übermitteln.

7
Axon

.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"  />

5
Eng_Farghly

Da ich sehe, dass einige Aspekte der Frage nicht angesprochen wurden, füge ich die folgende Antwort hinzu.

Damit Min und Max funktionieren können, müssen Sie für die Stunde 2 Ziffern haben

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

Dadurch wird eine Zeit mit AM ausgegeben und nur Stunden zwischen 1 und 3 Uhr erlaubt.

Auch um pm nur zu tun 

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

Dies wird eine Zeit mit PM ausgeben und nur Stunden zwischen 13:00 Uhr und 15:00 Uhr erlauben.

3
Moshe Sommers

Verwenden Sie eine benutzerdefinierte Eingabezeit, zB:

  • einige Browser können die Eingabetyp-Zeit nicht verarbeiten. In diesem Fall wurde der Text in den Eingabetyp umgewandelt, jedoch ohne Funktionen
  • die Eingabetypzeit sieht in jedem Browser anders aus
  • html5 bietet eine flexible Eingabeüberprüfung, die besser unterstützt wird als die Eingabezeit
  • es klingt so, als wollten Sie eine Zeit statt einer Zeit. 

Hier ist ein Vorschlag mit dem Eingabetyp Text und der Eingabeüberprüfung:

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

Und einen Vorschlag, wie Sie die Eingabe in JavaScript verarbeiten können (beachten Sie, dass durationFormValue 121, "2:01" und "1:61" alle gültig sind und dasselbe Ergebnis erzielen): 

// 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;
}

0
DaveFar