Het element <input type="date">

Waarde

Een string die de datum representeert die in het invoerveld ingevoerd is. De datum wordt opgemaakt volgens Datumstringsformaat.

U kunt een standaardwaarde voor het invoerveld instellen met een datum in het value-attribuut, zo:

<input type="date" value="2017-06-01" />

U kunt de datumwaarde in JavaScript ophalen en instellen met de eigenschappen value en valueAsNumber van HTMLInputElement. Bijvoorbeeld:

const dateControl = document.querySelector('input[type="date"]');
dateControl.value = "2017-06-01";
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)

Deze code vindt het eerste <input>-element waarvan type gelijk is aan date, en stelt de waarde ervan in op 2017-06-01 (1 juni 2017). Vervolgens leest de code die waarde terug in string- en getalformaat.

Aanvullende attributen

Naast de globale attributen en de invoerattributen die gemeenschappelijk zijn voor alle <input>-elementen, ondersteunt de date-invoer de volgende attributen:

max

De laatste datum die geaccepteerd wordt. Als de value die in het element ingevoerd is daarna valt, faalt het element de beperkingsvalidatie. Als de waarde van het max-attribuut geen mogelijke datumstring is in het formaat yyyy-mm-dd, heeft het element geen maximumdatumwaarde.

Als zowel het max- als het min-attribuut ingesteld zijn, moet deze waarde een datumstring zijn die later is dan of gelijk is aan de datumstring in het min-attribuut.

min

De vroegste datum die geaccepteerd wordt. Als de value die in het element ingevoerd is daarvoor valt, faalt het element de beperkingsvalidatie. Als de waarde van het min-attribuut geen mogelijke datumstring is in het formaat yyyy-mm-dd, heeft het element geen minimumdatumwaarde.

Als zowel het max- als het min-attribuut ingesteld zijn, moet deze waarde een datumstring zijn die eerder is dan of gelijk is aan de datumstring in het max-attribuut.

step

Het step-attribuut is een getal dat de granulariteit opgeeft waaraan de waarde moet voldoen, of de speciale waarde any, die hieronder beschreven wordt. Alleen waarden die een heel aantal stappen vanaf de stapbasis liggen, zijn geldig. De stapbasis is min indien opgegeven, anders value, of 0 (de Unix-epoch, 1970-01-01) als geen van beide opgegeven is.

Voor date-invoervelden wordt de waarde van step opgegeven in dagen en behandeld als een aantal milliseconden gelijk aan 86.400.000 keer de step-waarde (de onderliggende numerieke waarde is in milliseconden). De standaardwaarde is 1, wat 1 dag aangeeft.

Een stringwaarde van any betekent dat er geen stappen geïmpliceerd worden en elke waarde toegestaan is (afgezien van andere beperkingen, zoals min en max). In werkelijkheid heeft dit hetzelfde effect als 1 voor date-invoervelden, omdat de kiezer-UI alleen het selecteren van hele dagen toestaat.

Date-invoervelden gebruiken

Datuminvoervelden bieden een eenvoudige interface voor het kiezen van datums, en ze normaliseren het gegevensformaat dat naar de server gestuurd wordt, ongeacht de landinstelling van de gebruiker.

In deze sectie bekijken we basis- en vervolgens complexere toepassingen van <input type="date">.

Basisgebruik van date

Het meest basale gebruik van <input type="date"> omvat één <input> gecombineerd met zijn <label>, zoals hieronder te zien is:

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>

Deze HTML verzendt de ingevoerde datum onder de sleutel bday naar https://example.com — wat resulteert in een URL zoals https://example.com/?bday=1955-06-08.

Maximum- en minimumdatums instellen

U kunt de attributen min en max gebruiken om de datums die de gebruiker kan kiezen te beperken. In het volgende voorbeeld stellen we een minimumdatum van 2017-04-01 en een maximumdatum van 2017-04-30 in:

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>

Het resultaat is dat alleen dagen in april 2017 geselecteerd kunnen worden — de maand- en jaardelen van het tekstvak zijn niet bewerkbaar, en datums buiten april 2017 kunnen niet geselecteerd worden in de kiezerwidget.

U kunt het step-attribuut gebruiken om het aantal dagen dat de datum bij elke stap verspringt te variëren (bijvoorbeeld om alleen zaterdagen selecteerbaar te maken).

De grootte van het invoerveld regelen

<input type="date"> ondersteunt geen formuliergrootte-attributen zoals size. Gebruik liever CSS om de grootte in te stellen.

Validatie

Standaard valideert <input type="date"> de ingevoerde waarde niet verder dan het formaat ervan. De interfaces laten u over het algemeen niets invoeren dat geen datum is — wat handig is.

Als u min en max gebruikt om de beschikbare datums te beperken (zie Maximum- en minimumdatums instellen), schakelt de formulierbesturing ongeldige datums uit, en wordt er een foutmelding weergegeven als u een datum probeert in te dienen die buiten de grenzen valt.

U kunt ook het required-attribuut gebruiken om het invullen van de datum verplicht te maken — er wordt een foutmelding weergegeven als u een leeg datumveld probeert in te dienen.

Laten we een voorbeeld bekijken van minimum- en maximumdatums, en het veld ook verplicht maken:

<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity"></span>
  </label>

  <p>
    <button>Submit</button>
  </p>
</form>

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

Hier is de CSS die in het bovenstaande voorbeeld gebruikt wordt. We maken gebruik van de pseudo-elementen :valid en :invalid om een pictogram naast het invoerveld toe te voegen, op basis van of de huidige waarde geldig is. We moesten het pictogram op een <span> naast het invoerveld plaatsen, niet op het invoerveld zelf, omdat in in ieder geval Chrome de gegenereerde inhoud van het invoerveld binnen de formulierbesturing geplaatst wordt en niet effectief gestyled of getoond kan worden.

label {
  display: flex;
  align-items: center;
}

span::after {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

Voorbeelden

In dit voorbeeld maken we een datumkiezer met de native <input type="date">-kiezer.

HTML

De HTML ziet er zo uit:

<form>
  <div class="nativeDatePicker">
    <label for="bday">Enter your birthday:</label>
    <input type="date" id="bday" name="bday" />
    <span class="validity"></span>
  </div>
</form>

CSS

De CSS ziet er zo uit:

input:invalid + span::after {
  content: " ✖";
}

input:valid + span::after {
  content: " ✓";
}

Resultaten

Technische samenvatting

Zie ook

• <input>