HTML-Attributwert <input type="week">

Probieren Sie es aus

<label for="camp-week">Choose a week in May or June:</label>

<input
  type="week"
  name="week"
  id="camp-week"
  min="2018-W18"
  max="2018-W26"
  required />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Die Benutzeroberfläche des Steuerelements unterscheidet sich je nach Browser. Die browserübergreifende Unterstützung ist derzeit etwas eingeschränkt: Aktuell unterstützen es nur Chrome/Opera und Microsoft Edge. In Browsern ohne Unterstützung wird das Steuerelement auf eine Funktion zurückgesetzt, die <input type="text"> entspricht.

Wert

Ein String, der die im Eingabefeld eingegebene Woche und das Jahr darstellt. Das von diesem Eingabetyp verwendete Format ist unter Wochen-Strings beschrieben.

Sie können einen Standardwert festlegen, indem Sie im Attribut value einen Wert angeben:

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

Beachten Sie, dass das angezeigte Format vom tatsächlichen value abweichen kann. Dieser hat immer das Format yyyy-Www. Browser zeigen den obigen Wert beispielsweise möglicherweise als Week 01, 2017 an; an den Server wird jedoch immer ein Wert wie week=2017-W01 übermittelt.

Sie können den Wert auch in JavaScript über die Eigenschaft value des Eingabeelements abrufen und festlegen:

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

Zusätzliche Attribute

Zusätzlich zu den Attributen, die allen <input>-Elementen gemeinsam sind, bieten Eingabefelder vom Typ week die folgenden Attribute.

max

Das späteste zulässige Jahr mit Wochennummer im String-Format, das oben im Abschnitt Wert beschrieben ist. Überschreitet der in das Element eingegebene value diesen Wert, schlägt die Constraint-Validierung fehl. Ist der Wert des Attributs max kein gültiger Wochen-String, hat das Element keinen Maximalwert.

Dieser Wert muss größer oder gleich dem durch das Attribut min angegebenen Jahr mit Wochennummer sein.

min

Das früheste zulässige Jahr mit Wochennummer. Ist der value des Elements kleiner als dieser Wert, schlägt die Constraint-Validierung fehl. Ist der für min angegebene Wert kein gültiger Wochen-String, hat das Eingabefeld keinen Minimalwert.

Dieser Wert muss kleiner oder gleich dem Wert des Attributs max sein.

readonly

Ein boolesches Attribut, das bei Vorhandensein bewirkt, dass Benutzer das Feld nicht bearbeiten können. Sein value kann jedoch weiterhin durch JavaScript-Code geändert werden, der die Eigenschaft value von HTMLInputElement direkt setzt.

step

Das Attribut step ist eine Zahl, die die erforderliche Schrittweite für den Wert angibt, oder der unten beschriebene besondere Wert any. Gültig sind nur Werte, die vom Ausgangswert aus um eine ganzzahlige Anzahl von Schritten abweichen. Der Ausgangswert ist min, falls angegeben, andernfalls value oder −259.200.000 (der Beginn der Woche 1970-W01), wenn keines der beiden Attribute angegeben ist.

Bei Eingabefeldern vom Typ week wird step in Wochen angegeben und als Millisekundenwert behandelt, der dem step-Wert multipliziert mit 604.800.000 entspricht (der zugrunde liegende numerische Wert wird in Millisekunden angegeben). Der Standardwert ist 1, also eine Woche.

Der String-Wert any bedeutet, dass keine Schrittweite vorgegeben ist und jeder Wert zulässig ist, sofern andere Einschränkungen wie min und max eingehalten werden. Bei Eingabefeldern vom Typ week hat dies praktisch dieselbe Wirkung wie 1, da die Auswahloberfläche nur ganze Wochen zur Auswahl anbietet.

Eingabefelder vom Typ week verwenden

Eingabefelder vom Typ week wirken auf den ersten Blick praktisch: Sie bieten eine einfache Oberfläche zur Auswahl von Wochen und vereinheitlichen das Format der an den Server gesendeten Daten, unabhängig vom Browser oder der Locale des Benutzers. Bei <input type="week"> gibt es jedoch Probleme, da nicht alle Browser diesen Eingabetyp unterstützen.

Zunächst betrachten wir einfache und komplexere Einsatzmöglichkeiten von <input type="week">. Anschließend zeigen wir, wie Sie mit der eingeschränkten Browser-Unterstützung umgehen können (siehe Umgang mit der Browser-Unterstützung).

Einfache Verwendung von week

Die einfachste Verwendung von <input type="week"> besteht aus einer Kombination eines <input>-Elements mit einem <label>-Element:

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

Größe des Eingabefelds festlegen

<input type="week"> unterstützt keine Attribute zur Größenfestlegung von Formularfeldern wie size. Verwenden Sie stattdessen CSS.

Das Attribut step verwenden

Mit dem Attribut step sollten Sie festlegen können, um wie viele Wochen sich der Wert beim Erhöhen oder Verringern ändert. In unterstützenden Browsern scheint es jedoch keine Wirkung zu haben.

Validierung

Standardmäßig validiert <input type="week"> eingegebene Werte nicht. Die Benutzeroberflächen lassen in der Regel nur gültige Kombinationen aus Woche und Jahr zu. Das Feld kann aber weiterhin leer übermittelt werden. Möglicherweise möchten Sie außerdem den Bereich auswählbarer Wochen einschränken.

Früheste und späteste Woche festlegen

Mit den Attributen min und max können Sie die gültigen Wochen einschränken, die Benutzer auswählen können. Im folgenden Beispiel legen wir Week 01, 2017 als frühesten und Week 52, 2017 als spätesten Wert fest:

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

Das folgende CSS wird im obigen Beispiel verwendet. Mit den CSS-Pseudoklassen :valid und :invalid gestalten wir das Eingabefeld abhängig davon, ob sein aktueller Wert gültig ist. Die Symbole mussten auf einem <span>-Element neben dem Eingabefeld platziert werden statt auf dem Eingabefeld selbst: In Chrome wird generierter Inhalt innerhalb des Formularsteuerelements platziert und lässt sich dort nicht sinnvoll gestalten oder anzeigen.

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

Dadurch gelten nur die Wochen W01 bis W52 des Jahres 2017 als gültig und sind in unterstützenden Browsern auswählbar.

Wochenangaben erforderlich machen

Mit dem Attribut required können Sie die Angabe einer Woche verpflichtend machen. Unterstützende Browser zeigen dann einen Fehler an, wenn Sie versuchen, ein leeres Wochenfeld zu übermitteln.

Im folgenden Beispiel haben wir eine früheste und eine späteste Woche festgelegt und das Feld als erforderlich gekennzeichnet:

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

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

Wenn Sie versuchen, das Formular ohne Wert zu übermitteln, zeigt der Browser einen Fehler an. Probieren Sie es im Beispiel aus:

Für Benutzer eines Browsers ohne Unterstützung ist hier ein Screenshot:

Umgang mit der Browser-Unterstützung

Wie bereits erwähnt, ist die Browser-Unterstützung derzeit das größte Problem bei der Verwendung von Eingabefeldern vom Typ week: Safari und Firefox unterstützen sie auf Desktopgeräten nicht; ältere IE-Versionen unterstützen sie ebenfalls nicht.

Mobile Plattformen wie Android und iOS können solche Eingabetypen gut nutzen. Sie stellen spezielle Steuerelemente bereit, mit denen sich Werte auf Touchscreens einfach auswählen lassen. Die Auswahloberfläche für week in Chrome für Android sieht beispielsweise so aus:

Browser ohne Unterstützung greifen auf ein Texteingabefeld zurück. Das führt jedoch sowohl bei der Einheitlichkeit der Benutzeroberfläche – das angezeigte Steuerelement ist anders – als auch bei der Datenverarbeitung zu Problemen.

Das zweite Problem wiegt schwerer. Wie bereits erwähnt, wird der tatsächliche Wert eines Eingabefelds vom Typ week immer in das Format yyyy-Www umgewandelt. Greift der Browser auf ein allgemeines Texteingabefeld zurück, gibt es für Benutzer keinen Hinweis auf das richtige Eingabeformat, das auch nicht unmittelbar ersichtlich ist. Wochenangaben könnten beispielsweise so eingegeben werden:

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

Derzeit ist es für eine browserübergreifende Verarbeitung von Wochen und Jahren in Formularen am besten, Wochennummer und Jahr in getrennten Steuerelementen eingeben zu lassen (häufig werden dafür <select>-Elemente verwendet; ein Beispiel finden Sie unten) oder eine JavaScript-Bibliothek wie den jQuery Datepicker zu verwenden.

Beispiele

In diesem Beispiel erstellen wir zwei Gruppen von Steuerelementen zur Auswahl von Wochen: eine native Auswahloberfläche mit <input type="week"> sowie zwei <select>-Elemente zur Auswahl von Woche und Jahr für ältere Browser, die den Eingabetyp week nicht unterstützen.

Das HTML sieht so aus:

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

Die Wochenwerte werden vom folgenden JavaScript-Code dynamisch erzeugt.

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

Ein weiterer interessanter Teil des Codes ist die Erkennung der Browser-Unterstützung. Um festzustellen, ob der Browser <input type="week"> unterstützt, erstellen wir ein neues <input>-Element, versuchen, dessen type auf week zu setzen, und prüfen anschließend sofort den Wert von type. Browser ohne Unterstützung geben text zurück, da der Typ week auf den Typ text zurückfällt. Wird <input type="week"> nicht unterstützt, blenden wir die native Auswahloberfläche aus und zeigen stattdessen die alternative Oberfläche mit <select>-Elementen an.

// 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 Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das allgemeine <input>-Element und die Schnittstelle zu seiner Bearbeitung, HTMLInputElement
• In HTML verwendete Datums- und Zeitformate
• <input type="datetime-local">, <input type="date">, <input type="time"> und <input type="month">