Het element <input type="week">

Waarde

Een tekenreeks die de waarde van de week/het jaar vertegenwoordigt die in de invoer is ingevoerd. Het formaat van de datum-en-tijdwaarde die door dit invoertype wordt gebruikt, wordt beschreven in Weektekenreeksen.

U kunt een standaardwaarde voor de invoer instellen door een waarde op te nemen binnen het value-attribuut, zoals hier:

<label for="week">What week would you like to start?</label>
<input id="week" type="week" name="week" value="2017-W01" />

Eén ding om op te merken is dat het weergegeven formaat kan afwijken van de eigenlijke value, die altijd wordt geformatteerd als yyyy-Www. Wanneer de bovenstaande waarde naar de server wordt verzonden, tonen browsers deze bijvoorbeeld mogelijk als Week 01, 2017, maar de verzonden waarde ziet er altijd uit als week=2017-W01.

U kunt de waarde ook ophalen en instellen in JavaScript met behulp van de value-eigenschap van het invoerelement, bijvoorbeeld:

const weekControl = document.querySelector('input[type="week"]');
weekControl.value = "2017-W45";

Aanvullende attributen

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

max

Het laatste (in de tijd) jaar en weeknummer, in het tekenreeksformaat dat hierboven wordt besproken in de sectie Waarde, dat wordt geaccepteerd. Als de value die in het element is ingevoerd, dit overschrijdt, faalt het element bij beperkingsvalidatie. Als de waarde van het max-attribuut geen geldige weektekenreeks is, heeft het element geen maximumwaarde.

Deze waarde moet groter zijn dan of gelijk zijn aan het jaar en de week die zijn opgegeven door het min-attribuut.

min

Het vroegste jaar en de vroegste week die wordt geaccepteerd. Als de value van het element hier lager dan is, faalt het element bij beperkingsvalidatie. Als een waarde wordt opgegeven voor min die geen geldige weektekenreeks is, heeft de invoer geen minimumwaarde.

Deze waarde moet kleiner zijn dan of gelijk zijn aan de waarde van het max-attribuut.

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 direct 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 heel aantal stappen van de stapbasis verwijderd zijn, zijn geldig. De stapbasis is min indien opgegeven, anders value, of −259.200.000 (het begin van week 1970-W01) als geen van beide is opgegeven.

Voor week-invoervelden wordt de waarde van step opgegeven in weken en wordt behandeld als een aantal milliseconden gelijk aan 604.800.000 maal de step-waarde (de onderliggende numerieke waarde is in milliseconden). De standaardwaarde is 1, wat 1 week aangeeft.

Een tekenreekswaarde van any betekent dat er geen stappengrootte wordt geïmpliceerd, en elke waarde is toegestaan (behoudens andere beperkingen, zoals min en max). In werkelijkheid heeft dit hetzelfde effect als 1 voor week-invoervelden, omdat de picker-UI alleen het selecteren van hele weken toestaat.

Weekinvoervelden gebruiken

Weekinvoervelden lijken op het eerste gezicht handig, omdat ze een eenvoudige gebruikersinterface bieden voor het kiezen van weken en het naar de server verzonden gegevensformaat standaardiseren, ongeacht de browser of landinstelling van de gebruiker. Er zijn echter problemen met <input type="week"> omdat browserondersteuning niet in alle browsers is gegarandeerd.

We bekijken eerst basaal en vervolgens complexer gebruik van <input type="week">, en geven later advies over het beperken van het browserondersteuningsprobleem (zie Omgaan met browserondersteuning).

Basisgebruik van week

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

<form>
  <label for="week">What week would you like to start?</label>
  <input id="week" type="week" name="week" />
</form>

De invoergrootte regelen

<input type="week"> ondersteunt geen formuliergrootte-attributen zoals size. U zult voor uw groottebehoeften uw toevlucht moeten nemen tot CSS.

Het step-attribuut gebruiken

U zou het step-attribuut moeten kunnen gebruiken om het aantal weken te variëren dat wordt gesprongen wanneer de waarde wordt verhoogd of verlaagd, maar dit lijkt echter geen enkel effect te hebben op ondersteunende browsers.

Validatie

Standaard past <input type="week"> geen enkele validatie toe op ingevoerde waarden. De UI-implementaties laten u over het algemeen niets specificeren dat geen geldige week/jaar is, wat handig is, maar het is nog steeds mogelijk om te verzenden met een leeg veld, en u wilt mogelijk het bereik van kiesbare weken beperken.

Maximum- en minimumweken instellen

U kunt de min- en max-attributen gebruiken om de geldige weken te beperken die door de gebruiker kunnen worden gekozen. In het volgende voorbeeld stellen we een minimumwaarde van Week 01, 2017 en een maximumwaarde van Week 52, 2017 in:

<form>
  <label for="week">What week would you like to start?</label>
  <input id="week" type="week" name="week" min="2017-W01" max="2017-W52" />
  <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 moesten de pictogrammen op een <span> naast de invoer plaatsen, niet op de invoer zelf, omdat in Chrome de gegenereerde inhoud binnen de formuliercontrole wordt geplaatst en niet effectief kan worden gestyled of getoond.

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 weken tussen W01 en W52 in 2017 als geldig worden beschouwd en selecteerbaar zijn in ondersteunende browsers.

Weekwaarden verplicht maken

Daarnaast kunt u het required-attribuut gebruiken om het invullen van de week verplicht te maken. Als gevolg daarvan tonen ondersteunende browsers een foutmelding als u probeert een leeg weekveld te verzenden.

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

<form>
  <div>
    <label for="week">What week would you like to start?</label>
    <input
      id="week"
      type="week"
      name="week"
      min="2017-W01"
      max="2017-W52"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>

Als u probeert het formulier te verzenden zonder een waarde, toont de browser een foutmelding. Probeer nu met het voorbeeld te spelen:

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

Omgaan met browserondersteuning

Zoals hierboven vermeld, is het grote probleem bij het gebruik van weekinvoervelden op dit moment de browserondersteuning: Safari en Firefox ondersteunen dit niet op desktop, en oude versies van IE ondersteunen dit ook niet.

Mobiele platforms zoals Android en iOS maken uitstekend gebruik van dit soort invoertypes, en bieden gespecialiseerde UI-controls die het echt eenvoudig maken om waarden te selecteren in een touchscreenomgeving. De week-picker op Chrome voor Android ziet er bijvoorbeeld zo uit:

Niet-ondersteunende browsers vallen gracieus terug op een tekstinvoerveld, maar dit veroorzaakt problemen zowel op het gebied van de consistentie van de gebruikersinterface (de weergegeven control zal anders zijn), als op het gebied van gegevensverwerking.

Het tweede probleem is het meest ernstige. Zoals eerder vermeld, wordt bij een week-invoerveld de eigenlijke waarde altijd genormaliseerd naar het formaat yyyy-Www. Wanneer de browser terugvalt op een generiek tekstinvoerveld, is er niets om de gebruiker te begeleiden bij het correct formatteren van de invoer (en het is zeker niet intuïtief). Er zijn meerdere manieren waarop mensen weekwaarden zouden kunnen schrijven; bijvoorbeeld:

• Week 1 2017
• Jan 2-8 2017
• 2017-W01
• enz.

De beste manier om op dit moment cross-browser met weken/jaren in formulieren om te gaan, is door de gebruiker het weeknummer en jaar in aparte controls te laten invoeren (<select>-elementen zijn hiervoor populair; zie hieronder voor een voorbeeld), of door JavaScript-bibliotheken zoals de jQuery date picker te gebruiken.

Voorbeelden

In dit voorbeeld creëren we twee sets UI-elementen voor het kiezen van weken: een native picker gemaakt met <input type="week">, en een set van twee <select>-elementen voor het kiezen van weken/jaren in oudere browsers die het week-invoertype niet ondersteunen.

De HTML ziet er als volgt uit:

<form>
  <div class="nativeWeekPicker">
    <label for="week">What week would you like to start?</label>
    <input
      id="week"
      type="week"
      name="week"
      min="2017-W01"
      max="2018-W52"
      required />
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">What week would you like to start?</p>
  <div class="fallbackWeekPicker">
    <div>
      <span>
        <label for="week">Week:</label>
        <select id="fallbackWeek" name="week"></select>
      </span>
      <span>
        <label for="year">Year:</label>
        <select id="year" name="year">
          <option value="2017" selected>2017</option>
          <option value="2018">2018</option>
        </select>
      </span>
    </div>
  </div>
</form>

De weekwaarden worden dynamisch gegenereerd door de onderstaande JavaScript-code.

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 andere deel van de code dat interessant kan zijn, is de feature-detectiecode. Om te detecteren of de browser <input type="week"> ondersteunt, maken we een nieuw <input>-element, proberen we het type ervan in te stellen op week, en controleren we vervolgens direct wat het type ervan is ingesteld. Niet-ondersteunende browsers geven text terug, omdat het week-type terugvalt op het type text. Als <input type="week"> niet wordt ondersteund, verbergen we de native picker en tonen we in plaats daarvan de fallback picker-UI (<select>s).

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

const yearSelect = document.querySelector("#year");
const weekSelect = document.querySelector("#fallbackWeek");

// 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 = "week";
} 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 weeks dynamically
  populateWeeks();
}

function populateWeeks() {
  // Populate the week select with 52 weeks
  for (let i = 1; i <= 52; i++) {
    const option = document.createElement("option");
    option.textContent = i < 10 ? `0${i}` : i;
    weekSelect.appendChild(option);
  }
}

Technische samenvatting

Zie ook

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