<input type="week">

<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 variiert von Browser zu Browser; die plattformübergreifende Unterstützung ist derzeit etwas eingeschränkt, da es nur von Chrome/Opera und Microsoft Edge unterstützt wird. In nicht unterstützten Browsern wird das Steuerelement herabgestuft und funktioniert identisch wie <input type="text">.

Ein String, der den Wert der in die Eingabe eingegebenen Woche/Jahr darstellt. Das Format des Datums- und Zeitwerts, das von diesem Eingabetyp verwendet wird, wird in Wochen-Strings beschrieben.

Sie können einen Standardwert für die Eingabe festlegen, indem Sie einen Wert innerhalb des Attributs value angeben, zum Beispiel:

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

Es ist zu beachten, dass das dargestellte Format vom eigentlichen value abweichen kann, das immer im Format yyyy-Www formatiert ist. Wenn der obige Wert zum Beispiel an den Server übermittelt wird, können Browser ihn als Week 01, 2017 anzeigen, aber der übermittelte Wert wird immer wie week=2017-W01 aussehen.

Sie können den Wert auch in JavaScript über die value-Eigenschaft des Eingabeelements erhalten und festlegen, zum Beispiel:

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

Zusätzlich zu den allgemeinen Attributen für <input>-Elemente bieten Wocheneingaben die folgenden Attribute.

Das zeitlich späteste Jahr und die Wochennummer, im im Abschnitt Wert oben erläuterten Format, die akzeptiert werden sollen. Wenn der in das Element eingegebene value diesen Wert übersteigt, schlägt das Element bei der Einschränkungsgültigkeitsprüfung fehl. Wenn der Wert des max-Attributs kein gültiger Wochen-String ist, hat das Element keinen Maximalwert.

Dieser Wert muss größer oder gleich dem Jahr und der Woche sein, die durch das min-Attribut angegeben sind.

Das früheste Jahr und die Woche, die akzeptiert werden sollen. Wenn der value des Elements kleiner ist, schlägt das Element bei der Einschränkungsgültigkeitsprüfung fehl. Wenn ein Wert für min angegeben wird, der kein gültiger Wochen-String ist, hat die Eingabe keinen Minimalwert.

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

Ein Boolesches Attribut, das, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin durch direktes Setzen der value-Eigenschaft des HTMLInputElement durch JavaScript-Code geändert werden.

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die dem Schritt-Basiswert (min, falls angegeben, sonst value und ein entsprechender Standardwert, falls keiner von beiden angegeben ist) entsprechen, sind gültig.

Ein String-Wert any bedeutet, dass kein Schritt vorgegeben ist und jeder Wert erlaubt ist (sofern andere Einschränkungen, wie min und max, es zulassen).

Für week-Eingaben wird der Wert von step in Wochen angegeben, mit einem Skalierungsfaktor von 604.800.000 (da der zugrunde liegende numerische Wert in Millisekunden angegeben wird). Der Standardwert von step ist 1, was 1 Woche anzeigt. Die standardmäßige Schritt-Basis ist -259.200.000, was dem Beginn der ersten Woche von 1970 entspricht ("1970-W01").

Zu diesem Zeitpunkt ist nicht klar, was ein Wert von "any" für step bei Verwendung mit week-Eingaben bedeutet. Dies wird aktualisiert, sobald diese Information ermittelt wird.

Wocheneingaben klingen auf den ersten Blick praktisch, da sie eine einfache Benutzeroberfläche zum Auswählen von Wochen bieten und das Datenformat, das an den Server gesendet wird, unabhängig vom Browser oder der Region des Benutzers normalisieren. Es gibt jedoch Probleme mit <input type="week">, da die Unterstützung durch Browser nicht über alle Browser hinweg gewährleistet ist.

Wir werden grundlegende und komplexere Verwendungen von <input type="week"> betrachten und anschließend Ratschläge zur Minderung des Browserunterstützungsproblems geben (siehe Umgang mit Browser-Unterstützung).

Die grundlegendste Verwendung von <input type="week"> beinhaltet eine einfache Kombination aus <input> und <label>, wie unten gezeigt:

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

<input type="week"> unterstützt keine Form-Attributgrößen wie size. Sie müssen auf CSS für Größenanforderungen zurückgreifen.

Sie sollten in der Lage sein, das step-Attribut zu verwenden, um die Anzahl der Wochen zu variieren, die bei jedem Inkrement oder Dekrement übersprungen werden. Jedoch scheint es in unterstützenden Browsern keine Wirkung zu haben.

Standardmäßig wendet <input type="week"> keine Validierung der eingegebenen Werte an. Die UI-Implementierungen lassen in der Regel nicht zu, dass Sie etwas angeben, das keine gültige Woche/kein gültiges Jahr ist, was hilfreich ist, aber es ist immer noch möglich, ohne Eingabe abzusenden, und Sie möchten vielleicht den Bereich der wählbaren Wochen einschränken.

Sie können die Attribute min und max verwenden, um die gültigen Wochen einzuschränken, die vom Benutzer gewählt werden können. Im folgenden Beispiel legen wir einen Mindestwert von Week 01, 2017 und einen Höchstwert von Week 52, 2017 fest:

<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 ist das CSS, das im obigen Beispiel verwendet wird. Hier nutzen wir die :valid und :invalid CSS-Eigenschaften, um die Eingabe basierend auf der Gültigkeit des aktuellen Wertes zu gestalten. Wir mussten die Symbole in ein <span> neben der Eingabe setzen, nicht in die Eingabe selbst, da in Chrome der generierte Inhalt innerhalb des Form-Steuerelements platziert wird und nicht effektiv gestaltet oder angezeigt werden kann.

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

Das Ergebnis hier ist, dass nur Wochen zwischen W01 und W52 im Jahr 2017 als gültig erkannt und in unterstützenden Browsern ausgewählt werden können.

Zusätzlich können Sie das required-Attribut verwenden, um die Eingabe der Woche obligatorisch zu machen. Infolgedessen zeigen unterstützende Browser einen Fehler an, wenn Sie versuchen, ein leeres Wochenfeld abzusenden.

Schauen wir uns ein Beispiel an; hier haben wir minimale und maximale Wochen festgelegt und das Feld auch als erforderlich markiert:

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

Wenn Sie versuchen, das Formular ohne Wert abzusenden, zeigt der Browser einen Fehler an. Probieren Sie das Beispiel jetzt aus:

Hier ist ein Screenshot für diejenigen von Ihnen, die keinen unterstützenden Browser verwenden:

Wie oben erwähnt, ist das Hauptproblem bei der Verwendung von Wocheneingaben derzeit die Browserunterstützung: Safari und Firefox unterstützen dies auf Desktops nicht, und alte IE-Versionen auch nicht.

Mobile Plattformen wie Android und iOS nutzen solche Eingabetypen perfekt aus, indem sie spezielle UI-Steuerelemente bereitstellen, die die Auswahl von Werten in einer Touchscreen-Umgebung wirklich einfach machen. Zum Beispiel sieht der week-Picker auf Chrome für Android so aus:

Nicht unterstützende Browser degradieren elegant zu einer Texteingabe, aber das schafft Probleme sowohl in Bezug auf die Konsistenz der Benutzeroberfläche (das präsentierte Steuerelement wird unterschiedlich sein), als auch bei der Datenverarbeitung.

Das zweite Problem ist das gravierendere. Wie bereits erwähnt, ist bei einer week-Eingabe der tatsächliche Wert immer auf das Format yyyy-Www normalisiert. Wenn der Browser auf eine generische Texteingabe zurückfällt, gibt es nichts, was den Benutzer dazu bringt, die Eingabe korrekt zu formatieren (und es ist sicherlich nicht intuitiv). Es gibt verschiedene Möglichkeiten, wie Menschen Wochenwerte schreiben könnten, zum Beispiel:

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

Der beste Weg, um Wochen/Jahre derzeit plattformübergreifend in Formularen zu handhaben, besteht darin, den Benutzer zu bitten, die Wochennummer und das Jahr in separaten Steuerelementen (<select>-Elemente sind beliebt; siehe unten für ein Beispiel) einzugeben oder JavaScript-Bibliotheken wie jQuery-Datumswähler zu verwenden.

In diesem Beispiel erstellen wir zwei Sätze UI-Elemente zur Auswahl von Wochen: einen nativen Picker, der mit <input type="week"> erstellt wird, und ein Set von zwei <select>-Elementen zur Auswahl von Wochen/Jahren in älteren Browsern, die den week-Eingabetyp nicht unterstützen.

Der HTML-Code sieht folgendermaßen aus:

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

Die Wochenwerte werden durch den folgenden JavaScript-Code dynamisch generiert.

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

Der andere Teil des Codes, der von Interesse sein könnte, ist der Code zur Feature-Erkennung. Um zu erkennen, ob der Browser <input type="week"> unterstützt, erstellen wir ein neues <input>-Element, versuchen, seinen type auf week zu setzen, und überprüfen dann sofort, welcher type tatsächlich gesetzt ist. Nicht unterstützende Browser geben text zurück, weil der week-Typ zu text zurückfällt. Wenn <input type="week"> nicht unterstützt wird, verbergen wir den nativen Picker und zeigen stattdessen die Fallback-Picker-Benutzeroberfläche (<select>s) 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);
  }
}

• Das generische <input>-Element und die Schnittstelle zur Manipulation, HTMLInputElement
• In HTML verwendete Datums- und Zeitformate
• <input type="datetime-local">, <input type="date">, <input type="time">, und <input type="month">