web-dev-qa-db-fra.com

heure de type d'entrée html5 sans AM-PM et avec min-max

Comment puis-je supprimer la partie AM=PM à cette entrée

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

En outre, comme vous pouvez le constater, j’ai essayé d’ajouter min et max au temps lui-même, mais cela n’a pas fonctionné. Comment puis-je le faire fonctionner? Et il continue à me dire "Enter a valid value" chaque fois que j'essaie de le soumettre sans AM-PM

jqueryhtmlhtml5
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

Étant donné que certains aspects de la question n’ont pas été abordés, j’ajoute la réponse suivante.

Pour que vos min et max fonctionnent, vous devez avoir 2 chiffres pour l'heure.

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

Cela affichera une heure avec AM en vigueur et ne permettra que des heures entre 1h et 3h.

Aussi pour pouvoir faire juste 

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

Cela produira une heure avec PM appliquée et n'accordera que des heures entre 13h et 15h.

3
Moshe Sommers

Utilisez un temps d’entrée personnalisé, à savoir:

  • certains navigateurs ne peuvent pas gérer le temps du type d'entrée, auquel cas il s'est dégradé de manière élégante en texte de type d'entrée, mais sans aucune fonctionnalité
  • le type de temps d'entrée a une apparence différente sur chaque navigateur
  • html5 offre une validation d'entrée flexible, qui est mieux prise en charge que le type d'entrée time
  • on dirait que vous voulez une durée plutôt qu'une heure. 

Voici une suggestion utilisant le texte du type d'entrée et la validation de l'entrée:

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

Et une suggestion sur la manière de traiter les entrées en JavaScript (notez que durationFormValue 121, "2:01" et "1:61" sont tous valides et donnent le même résultat): 

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