Het element <input type="time">

Aanvullende attributen

Naast de attributen die alle <input>-elementen gemeen hebben, bieden time-invoervelden de volgende attributen.

list

De waarde van het list-attribuut is de id van een <datalist>-element dat zich in hetzelfde document bevindt. De <datalist> biedt een lijst met vooraf gedefinieerde waarden om aan de gebruiker voor te stellen voor dit invoerveld. Waarden in de lijst die niet compatibel zijn met het type worden niet opgenomen in de voorgestelde opties. De opgegeven waarden zijn suggesties, geen vereisten: gebruikers kunnen kiezen uit deze vooraf gedefinieerde lijst of een andere waarde opgeven.

max

Een string die de laatste te accepteren tijd aangeeft, opgegeven in hetzelfde tijdwaardeformaat als hierboven beschreven. Als de opgegeven string geen geldige tijd is, wordt er geen maximumwaarde ingesteld.

min

Een string die de vroegste te accepteren tijd opgeeft, in het eerder beschreven tijdwaardeformaat. Als de opgegeven waarde geen geldige tijdstring is, wordt er geen minimumwaarde ingesteld.

readonly

Een booleaans attribuut dat, indien aanwezig, betekent dat dit veld niet door de gebruiker kan worden bewerkt. De value ervan kan echter nog steeds worden gewijzigd door JavaScript-code die de value-eigenschap van HTMLInputElement rechtstreeks instelt.

step

Het step-attribuut is een getal dat de granulariteit specificeert waaraan de waarde moet voldoen, of de speciale waarde any, die hieronder wordt beschreven. Alleen waarden die een geheel aantal stappen van de stapbasis zijn, zijn geldig. De stapbasis is min indien opgegeven, anders value, of 0 (00:00:00) als geen van beide is opgegeven.

Voor time-invoervelden wordt de waarde van step opgegeven in seconden en behandeld als een aantal milliseconden gelijk aan 1000 keer de step-waarde (de onderliggende numerieke waarde is in milliseconden). De standaardwaarde is 60, wat 1 minuut aangeeft.

Een stringwaarde van any betekent dat er geen stappen worden geïmpliceerd en dat elke waarde is toegestaan (behoudens andere beperkingen, zoals min en max). In de praktijk heeft dit hetzelfde effect als 60 voor time-invoervelden, omdat de picker-UI in dit geval alleen het selecteren van hele minuten toestaat.

Validatie

Standaard past <input type="time"> geen validatie toe op ingevoerde waarden, afgezien van het feit dat de interface van de user agent over het algemeen niet toestaat iets anders dan een tijdwaarde in te voeren. Dit is nuttig, maar u kunt er niet volledig op vertrouwen dat de waarde een correcte tijdstring is, aangezien het een lege string ("") kan zijn, wat is toegestaan. Voor voorbeelden van constraint-validatie met de attributen min, max, step en required, zie de sectie maximum- en minimumtijden instellen.

Voorbeelden

Basisgebruik van time

Het meest basale gebruik van <input type="time"> bestaat uit een eenvoudige combinatie van <input> en het <label>-element, zoals hieronder te zien is:

<form>
  <label for="appointment-time">Choose an appointment time: </label>
  <input id="appointment-time" type="time" name="appointment-time" />
</form>

Een tijdkiezer-interface maken

In dit voorbeeld maken we een interface-element voor het kiezen van een tijd met behulp van de native picker die wordt gemaakt met <input type="time">:

<form>
  <label for="appointment-time">
    Choose an appointment time (opening hours 12:00 to 18:00):
  </label>
  <input
    id="appointment-time"
    type="time"
    name="appointment-time"
    min="12:00"
    max="18:00"
    required />
  <span class="validity"></span>
</form>

input[type="time"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

De grootte van de invoer aanpassen

<input type="time"> ondersteunt geen formuliergrootteattributen zoals size, aangezien tijden altijd ongeveer even lang zijn qua aantal tekens. U zult voor uw grootte-behoeften uw toevlucht moeten nemen tot CSS.

Het value-attribuut instellen

U kunt een standaardwaarde voor de invoer instellen door een geldige tijd op te nemen in het value-attribuut bij het aanmaken van het <input>-element, zoals hier:

<label for="appointment-time">Choose an appointment time: </label>
<input
  id="appointment-time"
  type="time"
  name="appointment-time"
  value="13:30" />

De waarde instellen met JavaScript

U kunt de tijdwaarde ook ophalen en instellen in JavaScript met behulp van de value-eigenschap van HTMLInputElement, bijvoorbeeld:

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = "15:30";

Formaat van de tijdwaarde

De value van de time-invoer is altijd in 24-uursformaat met voorloopnullen: HH:mm, ongeacht het invoerformaat, dat waarschijnlijk wordt geselecteerd op basis van de landinstelling van de gebruiker (of door de user agent). Als de tijd seconden bevat (zie Het step-attribuut gebruiken), is het formaat altijd HH:mm:ss. U kunt meer lezen over het formaat van de tijdwaarde die door dit invoertype wordt gebruikt in Tijdstrings.

In dit voorbeeld kunt u de waarde van de tijdinvoer zien door een tijd in te voeren en te bekijken hoe deze daarna verandert.

Eerst een blik op de HTML. We nemen een label en invoer op, en voegen een <p>-element toe met een <span> om de waarde van de time-invoer weer te geven:

<form>
  <label for="startTime">Start time: </label>
  <input type="time" id="startTime" />
  <p>
    Value of the <code>time</code> input:
    <code>"<span id="value">n/a</span>"</code>.
  </p>
</form>

De JavaScript-code voegt code toe aan de tijdinvoer om te luisteren naar het input-event, dat wordt geactiveerd elke keer dat de inhoud van een invoerelement verandert. Wanneer dit gebeurt, wordt de inhoud van de <span> vervangen door de nieuwe waarde van het invoerelement.

const startTime = document.getElementById("startTime");
const valueSpan = document.getElementById("value");

startTime.addEventListener("input", () => {
  valueSpan.innerText = startTime.value;
});

Wanneer een formulier met een time-invoer wordt ingediend, wordt de waarde gecodeerd voordat deze wordt opgenomen in de gegevens van het formulier. De gegevensinvoer van het formulier voor een tijdinvoer heeft altijd de vorm name=HH%3Amm, of name=HH%3Amm%3Ass als er seconden zijn opgenomen (zie Het step-attribuut gebruiken).

Het step-attribuut gebruiken

U kunt het step-attribuut gebruiken om de hoeveelheid tijd te variëren die wordt gesprongen telkens wanneer de tijd wordt verhoogd of verlaagd (bijvoorbeeld, zodat de tijd telkens 10 minuten verspringt bij het klikken op de kleine pijltjeswidgets).

Het accepteert een geheel getal dat het aantal seconden aangeeft waarmee u wilt verhogen; de standaardwaarde is 60 seconden. Met deze standaardwaarde tonen de meeste tijd-UI's van user agents uren en minuten, maar geen seconden. Door het step-attribuut op te nemen met een numerieke waarde die niet deelbaar is door 60, worden er seconden toegevoegd aan de UI, als de min- of max-waarde de seconden niet al zichtbaar heeft gemaakt.

<form>
  <label for="appointment-time">Choose an appointment time: </label>
  <input id="appointment-time" type="time" name="appointment-time" step="2" />
</form>

Om minuten of uren als stap op te geven, geeft u het aantal minuten of uren in seconden op, zoals 120 voor 2 minuten, of 7200 voor 2 uur.

Maximum- en minimumtijden instellen

U kunt de attributen min en max gebruiken om de geldige tijden te beperken die door de gebruiker kunnen worden gekozen. In het volgende voorbeeld stellen we een minimumtijd van 12:00 en een maximumtijd van 18:00 in:

<form>
  <label for="appointment-time">
    Choose an appointment time (opening hours 12:00 to 18:00):
  </label>
  <input
    id="appointment-time"
    type="time"
    name="appointment-time"
    min="12:00"
    max="18:00" />
  <span class="validity"></span>
</form>

Hier is de CSS die in het bovenstaande voorbeeld wordt gebruikt. Hier maken we gebruik van de CSS-eigenschappen :valid en :invalid om de invoer te stylen op basis van of de huidige waarde geldig is. We voegen een icoon toe als gegenereerde content op een <span> naast de invoer.

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Het resultaat hiervan is dat:

• Alleen tijden tussen 12:00 en 18:00 als geldig worden beschouwd; tijden buiten dat bereik worden als ongeldig aangeduid.

min en max middernacht laten overschrijden

Door een min-attribuut in te stellen dat groter is dan het max-attribuut, zal het geldige tijdbereik middernacht overschrijden om een geldig tijdbereik te produceren. Deze functionaliteit wordt door geen enkel ander invoertype ondersteund.

const input = document.createElement("input");
input.type = "time";
input.min = "23:00";
input.max = "01:00";
input.value = "23:59";

if (input.validity.valid && input.type === "time") {
  // <input type=time> reversed range supported
} else {
  // <input type=time> reversed range unsupported
}

Tijden verplicht maken

Daarnaast kunt u het required-attribuut gebruiken om het invullen van de tijd verplicht te maken. Browsers geven een foutmelding weer als u probeert een tijd in te dienen die buiten de ingestelde grenzen ligt, of een leeg tijdveld.

Laten we naar een voorbeeld kijken; hier hebben we minimum- en maximumtijden ingesteld, en het veld ook verplicht gemaakt:

<form>
  <div>
    <label for="appointment-time">
      Choose an appointment time (opening hours 12:00 to 18:00):
    </label>
    <input
      id="appointment-time"
      type="time"
      name="appointment-time"
      min="12:00"
      max="18:00"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>

Als u probeert het formulier in te dienen met een onvolledige tijd (of met een tijd buiten de ingestelde grenzen), geeft de browser een foutmelding weer. Probeer nu met het voorbeeld te spelen:

Technische samenvatting

Zie ook

• <input type="date">
• <input type="datetime-local">
• <input type="week">
• <input type="month">
• <input>