Het element <input type="month">

Waarde

Een string die de waarde van de maand en het jaar representeert die in het invoerveld ingevoerd zijn, in de vorm YYYY-MM (vier of meer cijfers voor het jaar, dan een koppelteken (-), gevolgd door het tweecijferige maandnummer). Het formaat van de maandstring die door dit invoertype gebruikt wordt, is beschreven in Maandstrings.

Een standaardwaarde instellen

U kunt een standaardwaarde instellen voor het invoerveld door een maand en jaar op te nemen in het value-attribuut, zo:

<label for="bday-month">What month were you born in?</label>
<input id="bday-month" type="month" name="bday-month" value="2001-06" />

Let op dat het weergegeven datumformaat afwijkt van de daadwerkelijke value; de meeste user agents geven de maand en het jaar weer in een vorm die past bij de landinstelling, gebaseerd op de ingestelde landinstelling van het besturingssysteem van de gebruiker, terwijl de value van de datum altijd is opgemaakt als yyyy-MM.

Wanneer de bovenstaande waarde naar de server verzonden wordt, ziet het er bijvoorbeeld zo uit: bday-month=1978-06.

De waarde instellen met JavaScript

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

<label for="bday-month">What month were you born in?</label>
<input id="bday-month" type="month" name="bday-month" />

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = "2001-06";

Aanvullende attributen

Naast de attributen die gemeenschappelijk zijn voor <input>-elementen, bieden month-invoervelden de volgende attributen.

list

De waarde van het list-attribuut is de id van een <datalist>-element dat zich in hetzelfde document bevindt. Het <datalist>-element levert 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 geleverde waarden zijn suggesties, geen vereisten: gebruikers kunnen kiezen uit deze vooraf gedefinieerde lijst of een andere waarde opgeven.

max

Het laatste jaar en de laatste maand, in het stringformaat besproken in de sectie Waarde hierboven, die geaccepteerd worden. Als de value die in het element ingevoerd is deze overschrijdt, faalt het element de beperkingsvalidatie. Als de waarde van het max-attribuut geen geldige string in het yyyy-MM-formaat is, heeft het element geen maximumwaarde.

Deze waarde moet een jaar-maandcombinatie opgeven die later is dan of gelijk is aan de combinatie die opgegeven is met het min-attribuut.

min

De vroegste jaar-maandcombinatie die geaccepteerd wordt, in hetzelfde yyyy-MM-formaat als hierboven beschreven. Als de value van het element kleiner is dan deze waarde, faalt het element de beperkingsvalidatie. Als een waarde opgegeven wordt voor min die geen geldige jaar-maandstring is, heeft het invoerveld geen minimumwaarde.

Deze waarde moet een jaar-maandcombinatie zijn die eerder is dan of gelijk is aan de combinatie die opgegeven is met het max-attribuut.

readonly

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

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) als geen van beide opgegeven is.

Voor month-invoervelden wordt de waarde van step opgegeven in maanden. De standaardwaarde van step is 1, wat 1 maand 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 month-invoervelden, omdat de kiezer-UI alleen het selecteren van hele maanden toestaat.

Month-invoervelden gebruiken

Datumgerelateerde invoervelden (inclusief month) klinken op het eerste gezicht handig; ze beloven een eenvoudige UI voor het kiezen van datums, en ze normaliseren het gegevensformaat dat naar de server gestuurd wordt, ongeacht de landinstelling van de gebruiker. Er zijn echter problemen met <input type="month"> omdat op dit moment veel grote browsers het nog niet ondersteunen.

We bekijken basis- en complexere toepassingen van <input type="month">, en geven vervolgens advies over het beperken van het browserondersteuningsprobleem in de sectie Omgaan met browserondersteuning).

Basisgebruik van month

Het meest basale gebruik van <input type="month"> omvat een eenvoudige combinatie van <input> en <label>, zoals hieronder te zien is:

<form>
  <label for="bday-month">What month were you born in?</label>
  <input id="bday-month" type="month" name="bday-month" />
</form>

Maximum- en minimumdatums instellen

U kunt de attributen min en max gebruiken om het bereik van datums die de gebruiker kan kiezen te beperken. In het volgende voorbeeld geven we een minimummaand van 1900-01 en een maximummaand van 2013-12 op:

<form>
  <label for="bday-month">What month were you born in?</label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
</form>

Het resultaat hiervan is dat:

• Alleen maanden tussen januari 1900 en december 2013 geselecteerd kunnen worden; naar maanden buiten dat bereik kan niet gescrold worden in de besturing.
• Afhankelijk van de browser die u gebruikt, kunt u merken dat maanden buiten het opgegeven bereik niet selecteerbaar zijn in de maandkiezer (bijvoorbeeld Edge), of ongeldig (zie Validatie) maar nog steeds beschikbaar (bijvoorbeeld Chrome).

De grootte van het invoerveld regelen

<input type="month"> ondersteunt geen formuliergrootte-attributen zoals size. U moet uw toevlucht nemen tot CSS voor de grootte-instellingen.

Validatie

Standaard past <input type="month"> geen validatie toe op ingevoerde waarden. De UI-implementaties laten u over het algemeen niets invoeren dat geen datum is — wat handig is — maar u kunt het formulier nog steeds indienen met het month-invoerveld leeg, of een ongeldige datum invoeren (bijvoorbeeld de 32e april).

Om dit te voorkomen, kunt u min en max gebruiken om de beschikbare datums te beperken (zie Maximum- en minimumdatums instellen), en daarnaast het required-attribuut gebruiken om het invullen van de datum verplicht te maken. Als gevolg hiervan tonen ondersteunende browsers een foutmelding als u probeert een datum in te dienen die buiten de ingestelde grenzen valt, of een leeg datumveld.

Laten we een voorbeeld bekijken; hier hebben we minimum- en maximumdatums ingesteld, en ook het veld verplicht gemaakt:

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    </label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>

Als u probeert het formulier in te dienen zonder dat zowel de maand als het jaar opgegeven zijn (of met een datum buiten de ingestelde grenzen), toont de browser een foutmelding. Probeer nu met het voorbeeld te spelen:

Hier is een schermafbeelding voor degenen onder u die geen ondersteunende browser gebruiken:

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

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

Omgaan met browserondersteuning

Zoals hierboven vermeld, is het grootste probleem bij het gebruik van datuminvoervelden op het moment van schrijven dat veel grote browsers ze nog niet allemaal implementeren; alleen Chrome/Opera en Edge ondersteunen het op de desktop, en de meeste moderne browsers op mobiel. De month-kiezer op Chrome voor Android ziet er bijvoorbeeld zo uit:

Niet-ondersteunende browsers degraderen gracieus naar een tekstinvoerveld, maar dit zorgt voor problemen zowel wat betreft de consistentie van de gebruikersinterface (de gepresenteerde besturing zal anders zijn) als de gegevensverwerking.

Het tweede probleem is het ernstigste van de twee. Zoals eerder vermeld, wordt bij een month-invoerveld de daadwerkelijke waarde altijd genormaliseerd naar het formaat yyyy-mm. Een text-invoerveld heeft daarentegen in de standaardconfiguratie geen idee in welk formaat de datum moet zijn, en dit is een probleem vanwege het aantal verschillende manieren waarop mensen datums schrijven. Bijvoorbeeld:

• mmyyyy (072022)
• mm/yyyy (07/2022)
• mm-yyyy (07-2022)
• yyyy-mm (2022-07)
• Month yyyy (July 2022)
• enzovoort…

Een manier om dit te omzeilen, is door een pattern-attribuut op uw month-invoerveld te zetten. Ook al gebruikt het month-invoerveld dit niet, als de browser terugvalt op het behandelen ervan als een text-invoerveld, wordt het patroon gebruikt. Probeer bijvoorbeeld de volgende demo te bekijken in een browser die geen month-invoervelden ondersteunt:

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    </label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required
      pattern="[0-9]{4}-[0-9]{2}" />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>

Als u het probeert in te dienen, ziet u dat de browser nu een foutmelding weergeeft (en het invoerveld als ongeldig markeert) als uw invoer niet overeenkomt met het patroon nnnn-nn, waarbij n een cijfer van 0 tot 9 is. Dit weerhoudt mensen er natuurlijk niet van om ongeldige datums in te voeren (zoals 0000-42), of onjuist opgemaakte datums die wel aan het patroon voldoen.

Er is ook het probleem dat de gebruiker niet noodzakelijk weet welk van de vele datumformaten verwacht wordt. Er is nog werk te doen.

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

De beste manier om op een cross-browser-manier met datums in formulieren om te gaan (totdat alle grote browsers ze al enige tijd ondersteunen), is de gebruiker de maand en het jaar in aparte besturingselementen te laten invoeren (<select>-elementen zijn hiervoor populair; zie hieronder voor een implementatie), of JavaScript-bibliotheken zoals de plugin jQuery date picker te gebruiken.

Voorbeelden

In dit voorbeeld maken we twee sets UI-elementen, elk ontworpen om de gebruiker een maand en jaar te laten selecteren. De eerste is een native month-invoerveld, en de andere is een paar <select>-elementen waarmee onafhankelijk een maand en jaar gekozen kunnen worden, voor compatibiliteit met browsers die <input type="month"> nog niet ondersteunen.

HTML

Het formulier dat om de maand en het jaar vraagt, ziet er zo uit:

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?</label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">What month would you like to visit us?</p>
  <div class="fallbackDatePicker">
    <div>
      <span>
        <label for="month">Month:</label>
        <select id="month" name="month">
          <option selected>January</option>
          <option>February</option>
          <option>March</option>
          <option>April</option>
          <option>May</option>
          <option>June</option>
          <option>July</option>
          <option>August</option>
          <option>September</option>
          <option>October</option>
          <option>November</option>
          <option>December</option>
        </select>
      </span>
      <span>
        <label for="year">Year:</label>
        <select id="year" name="year"></select>
      </span>
    </div>
  </div>
</form>

De <div> met de ID nativeDatePicker gebruikt het month-invoertype om de maand en het jaar op te vragen, terwijl de <div> met de ID fallbackDatePicker in plaats daarvan een paar <select>-elementen gebruikt. De eerste vraagt de maand op, en de tweede het jaar.

De <select> voor het kiezen van de maand is hardgecodeerd met de namen van de maanden, aangezien deze niet veranderen (lokalisatie buiten beschouwing gelaten). De lijst met beschikbare jaarwaarden wordt dynamisch gegenereerd afhankelijk van het huidige jaar (zie de codecommentaren hieronder voor gedetailleerde uitleg over hoe deze functies werken).

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

JavaScript

De JavaScript-code die de keuze van de te gebruiken aanpak afhandelt en de lijst met jaren voor de niet-native jaar-<select> instelt, volgt hieronder.

Het deel van het voorbeeld dat het meest interessant kan zijn, is de featuredetectiecode. Om te detecteren of de browser <input type="month"> ondersteunt, maken we een nieuw <input>-element, proberen we het type ervan in te stellen op month, en controleren we vervolgens onmiddellijk waarop het type ingesteld is. Browsers die het type month niet ondersteunen, geven text terug, aangezien dat is waar month naar terugvalt wanneer het niet ondersteund wordt. Als <input type="month"> niet ondersteund wordt, verbergen we de native kiezer en tonen we in plaats daarvan de fallback-kiezer-UI.

// Get UI elements
const nativePicker = document.querySelector(".nativeDatePicker");
const fallbackPicker = document.querySelector(".fallbackDatePicker");
const fallbackLabel = document.querySelector(".fallbackLabel");

const yearSelect = document.querySelector("#year");
const monthSelect = document.querySelector("#month");

// Hide fallback initially
fallbackPicker.style.display = "none";
fallbackLabel.style.display = "none";

// Test whether a new date input falls back to a text input or not
const test = document.createElement("input");

try {
  test.type = "month";
} catch (e) {
  console.log(e.description);
}

// If it does, run the code inside the if () {} block
if (test.type === "text") {
  // Hide the native picker and show the fallback
  nativePicker.style.display = "none";
  fallbackPicker.style.display = "block";
  fallbackLabel.style.display = "block";

  // Populate the years dynamically
  // (the months are always the same, therefore hardcoded)
  populateYears();
}

function populateYears() {
  // Get the current year as a number
  const date = new Date();
  const year = date.getFullYear();

  // Make this year, and the 100 years before it available in the year <select>
  for (let i = 0; i <= 100; i++) {
    const option = document.createElement("option");
    option.textContent = year - i;
    yearSelect.appendChild(option);
  }
}

Technische samenvatting

Zie ook

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