Het element <input type="datetime-local">

Waarde

Een string die de waarde van de in de invoer ingevoerde datum weergeeft. Het formaat van de datum- en tijdwaarde die door dit invoertype wordt gebruikt, wordt beschreven in Lokale datum- en tijdstrings.

U kunt een standaardwaarde voor de invoer instellen door een datum en tijd op te nemen in het value-attribuut, zoals hier:

<label for="party">Enter a date and time for your party booking:</label>
<input
  id="party"
  type="datetime-local"
  name="party-date"
  value="2017-06-01T08:30" />

Een ding om op te merken is dat de weergegeven datum- en tijdformaten verschillen van de daadwerkelijke value; de weergegeven datum en tijd worden geformatteerd volgens de landinstelling van de gebruiker zoals gerapporteerd door zijn besturingssysteem, terwijl de datum-/tijd-value altijd wordt geformatteerd als YYYY-MM-DDTHH:mm. Wanneer de bovenstaande waarde naar de server wordt verzonden, ziet deze er bijvoorbeeld uit als party-date=2024-06-01T08:30.

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

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = "2017-06-01T08:30";

Aanvullende attributen

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

max

De laatste datum en tijd die geaccepteerd wordt. Als de value die in het element is ingevoerd later is dan deze tijdstempel, faalt het element de beperkingsvalidatie. Als de waarde van het max-attribuut geen geldige string is die het formaat YYYY-MM-DDTHH:mm volgt, heeft het element geen maximumwaarde.

Deze waarde moet een datumstring specificeren die later is dan of gelijk is aan de datum die is opgegeven door het min-attribuut.

min

De vroegste datum en tijd die geaccepteerd wordt; tijdstempels eerder dan deze zorgen ervoor dat het element de beperkingsvalidatie faalt. Als de waarde van het min-attribuut geen geldige string is die het formaat YYYY-MM-DDTHH:mm volgt, heeft het element geen minimumwaarde.

Deze waarde moet een datumstring specificeren die eerder is dan of gelijk is aan de datum die is opgegeven door het max-attribuut.

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 (het Unix-epoch, 1970-01-01T00:00) als geen van beide is opgegeven.

Voor datetime-local-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 werkelijkheid heeft dit hetzelfde effect als 60 voor datetime-local-invoervelden, omdat de keuze-gebruikersinterface in dit geval alleen het selecteren van hele minuten toestaat.

Gebruik van datetime-local-invoervelden

Datum-/tijdinvoervelden zijn handig voor de ontwikkelaar; ze bieden een eenvoudige gebruikersinterface voor het kiezen van data en tijden, en ze normaliseren het gegevensformaat dat naar de server wordt verzonden, ongeacht de landinstelling van de gebruiker. Het is echter belangrijk om aan uw gebruikers te denken. Vereis niet dat uw gebruikers gegevens invoeren die niet nodig zijn om uw app te laten functioneren.

De invoergrootte beheren

<input type="datetime-local"> ondersteunt geen formuliercontrole-groottekenmerken zoals size. U zult uw toevlucht moeten nemen tot CSS om de groottes van deze elementen aan te passen.

Tijdzones instellen

Iets wat het datetime-local-invoertype niet biedt, is een manier om de tijdzone en/of landinstelling van de datum-/tijdbediening in te stellen. Dit was beschikbaar in het datetime-invoertype, maar dit type is nu verouderd en uit de specificatie verwijderd. De belangrijkste redenen hiervoor waren een gebrek aan implementatie in browsers en zorgen over de gebruikersinterface/-ervaring. Het is eenvoudiger om gewoon een bediening (of bedieningen) te hebben voor het instellen van de datum/tijd en de landinstelling vervolgens in een aparte bediening te verwerken.

Als u bijvoorbeeld een systeem bouwt waarin de gebruiker waarschijnlijk al is ingelogd, met zijn landinstelling al ingesteld, kunt u de tijdzone opgeven in een hidden-invoertype. Bijvoorbeeld:

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

Als u daarentegen de gebruiker een tijdzone moet laten invoeren naast een datum-/tijdinvoer, kunt u een <select>-element gebruiken waarmee de gebruiker de juiste tijdzone kan instellen door een bepaalde locatie te kiezen uit een reeks locaties:

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajalein</option>
  <option value="Pacific/Midway">Midway Island, Samoa</option>
  <option value="Pacific/Honolulu">Hawaii</option>
  <option value="Pacific/Marquesas">Taiohae</option>
  <!-- and so on -->
</select>

In beide gevallen worden de datum-/tijd- en tijdzonewaarden als afzonderlijke gegevenspunten naar de server verzonden, en moet u ze vervolgens op de juiste manier opslaan in de database aan de serverzijde.

Validatie

Standaard past <input type="datetime-local"> geen validatie toe op ingevoerde waarden. De gebruikersinterface-implementaties laten u over het algemeen niets invoeren dat geen datum/tijd is — wat handig is — maar een gebruiker kan nog steeds geen waarde invullen en toch verzenden, of een ongeldige datum en/of tijd invoeren (bijv. de 32ste april).

U kunt min en max gebruiken om de beschikbare data te beperken (zie Maximale en minimale data instellen), en u kunt het required-attribuut gebruiken om het invullen van de datum/tijd verplicht te maken. Als gevolg hiervan tonen browsers een fout als u probeert een datum te verzenden die buiten de ingestelde grenzen ligt, of een leeg datumveld.

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

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    </label>
    <input
      id="party"
      type="datetime-local"
      name="party-date"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Book party!" />
  </div>
</form>

Als u probeert het formulier te verzenden met een onvolledige datum (of met een datum buiten de ingestelde grenzen), toont de browser een fout. Probeer nu met het voorbeeld te spelen:

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 plaatsen de pictogrammen op een <span> naast de invoer.

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

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

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

Voorbeelden

Basisgebruik van datetime-local

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

<form>
  <label for="party">Enter a date and time for your party booking:</label>
  <input id="party" type="datetime-local" name="party-date" />
</form>

Maximale en minimale data en tijden instellen

U kunt de attributen min en max gebruiken om de data/tijden te beperken die de gebruiker kan kiezen. In het volgende voorbeeld stellen we een minimale datumtijd van 2025-06-01T08:30 en een maximale datumtijd van 2025-06-30T16:30 in:

<form>
  <label for="party">Enter a date and time for your party booking:</label>
  <input
    id="party"
    type="datetime-local"
    name="party-date"
    min="2025-06-01T08:30"
    max="2025-06-30T16:30" />
</form>

Alleen dagen in juni 2025 kunnen worden geselecteerd. Afhankelijk van welke browser u gebruikt, kunnen tijden buiten de opgegeven waarden mogelijk niet selecteerbaar zijn. In andere browsers zijn ongeldige data en tijden wel selecteerbaar, maar komen ze overeen met :invalid en :out-of-range en zullen ze de validatie niet doorstaan.

In sommige browsers (Safari) lijkt de datumkiezer elke datum toe te staan, maar wordt de waarde begrensd tot het geldige bereik wanneer een datum wordt geselecteerd.

Het geldige bereik omvatte alle tijden tussen de min- en max-waarden; het tijdstip van de dag wordt alleen beperkt op de eerste en laatste datum in het bereik.

Technische samenvatting

Zie ook

• <input>
• <input type="date">
• <input type="time">