<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 je nach Browser; die Unterstützung in verschiedenen Browsern ist momentan etwas eingeschränkt, da es bisher nur von Chrome/Opera und Microsoft Edge unterstützt wird. In nicht unterstützenden Browsern degradiert das Steuerelement automatisch zu einer Funktionalität, die identisch mit der von <input type="text"> ist.

Ein Zeichenfolgenwert, der den Wert der in die Eingabe eingegebenen Woche/Jahr darstellt. Das Format des Datums- und Zeitwertes, der von diesem Eingabetyp verwendet wird, wird in Week strings beschrieben.

Sie können einen Standardwert für die Eingabe festlegen, indem Sie einen Wert innerhalb des value-Attributs einschließen, wie folgt:

<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 möglicherweise von dem tatsächlichen value abweichen kann, das immer als yyyy-Www formatiert wird. Wenn der obige Wert beispielsweise an den Server übermittelt wird, können Browser ihn als Woche 01, 2017 anzeigen, aber der übermittelte Wert sieht immer wie week=2017-W01 aus.

Sie können den Wert auch in JavaScript mit der value-Eigenschaft des Eingabeelements abrufen 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 Woche-Eingaben die folgenden Attribute.

Das neueste (zeitlich gesehen) Jahr und die Wochenzahl, im oben im Abschnitt Wert beschriebenen Zeichenfolgenformat, die akzeptiert werden. Wenn der in das Element eingegebene value diesen überschreitet, schlägt die Elementprüfung constraint validation fehl. Wenn der Wert des max-Attributs keine gültige Wochenzeichenfolge ist, dann hat das Element keinen Höchstwert.

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. Wenn der value des Elements kleiner als dieser ist, schlägt die Elementprüfung constraint validation fehl. Wenn ein Wert für min angegeben wird, der keine gültige Wochenzeichenfolge 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 immer noch durch JavaScript-Code geändert werden, der die HTMLInputElement value-Eigenschaft direkt setzt.

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss, oder den speziellen Wert any, der unten beschrieben wird. Nur Werte, die gleich der Grundlage für das Stufen (min falls angegeben, value andernfalls und ein geeigneter Standardwert, wenn keiner dieser Werte angegeben ist) sind gültig.

Ein Zeichenfolgenwert von any bedeutet, dass keine Stufen angedeutet werden, und jeder Wert erlaubt ist (unter Berücksichtigung anderer Einschränkungen, wie min und max).

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 ist). Der Standardwert von step ist 1, was 1 Woche bedeutet. Die Standardstufenbasis ist -259.200.000, was der Beginn der ersten Woche von 1970 ("1970-W01") ist.

Zu diesem Zeitpunkt ist unklar, was ein Wert von "any" für step bedeutet, wenn er mit week-Eingaben verwendet wird. Diese Information wird aktualisiert, sobald sie bestimmt ist.

Woche-Eingaben erscheinen auf den ersten Blick praktisch, da sie eine einfache Benutzeroberfläche zum Auswählen von Wochen bereitstellen und das Datenformat normalisieren, das an den Server gesendet wird, unabhängig vom Browser oder der Spracheinstellung des Benutzers. Es gibt jedoch Probleme mit <input type="week">, da die Browser-Unterstützung nicht in allen Browsern gewährleistet ist.

Wir werden uns grundlegende und komplexere Anwendungen von <input type="week"> ansehen und dann Ratschläge geben, wie das Problem der Browser-Unterstützung gemildert werden kann (siehe Umgang mit der Unterstützung von Browsern).

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

<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 Formulierungsgrößenattribute wie size. Sie müssen sich auf CSS für Größenbedürfnisse verlassen.

Sie sollten in der Lage sein, das step-Attribut zu verwenden, um die Anzahl der Wochen zu variieren, die jeweils inkrementiert oder dekrementiert werden. Es scheint jedoch keinen Effekt auf unterstützende Browser zu haben.

Standardmäßig wendet <input type="week"> keine Validierung auf eingegebene Werte an. Die Benutzeroberflächenimplementierungen lassen Sie in der Regel nichts angeben, was keine gültige Woche/Jahr ist, was hilfreich ist, aber es ist dennoch möglich, ohne Wertnahmen zu übermitteln, und Sie möchten möglicherweise den Bereich der auswählbaren Wochen einschränken.

Sie können die min und max-Attribute verwenden, um die gültigen Wochen einzuschränken, die der Benutzer auswählen kann. Im folgenden Beispiel legen wir einen Minimalwert von Woche 01, 2017 und einen Maximalwert von Woche 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 darauf zu stylen, ob der aktuelle Wert gültig ist. Wir mussten die Symbole auf einem <span> neben der Eingabe platzieren, nicht auf der Eingabe selbst, da in Chrome der generierte Inhalt innerhalb des Formularelements platziert wird und nicht effektiv gestylt 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 angesehen und in unterstützenden Browsern auswählbar sind.

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

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

<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 einen Wert zu übermitteln, zeigt der Browser einen Fehler an. Versuchen Sie jetzt, mit dem Beispiel zu experimentieren:

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 Unterstützung durch Browser: Safari und Firefox unterstützen dies nicht auf dem Desktop, und alte IE-Versionen unterstützen es nicht.

Mobile Plattformen wie Android und iOS machen perfekten Gebrauch von solchen Eingabetypen und bieten spezielle UI-Steuerelemente, die es sehr einfach machen, Werte in einer Touchscreen-Umgebung auszuwählen. Zum Beispiel sieht der week-Picker in Chrome für Android so aus:

Nicht unterstützende Browser degradieren elegant zu einer Texteingabe, was jedoch Probleme sowohl hinsichtlich der Konsistenz der Benutzeroberfläche (das präsentierte Steuerelement wird anders sein) als auch der Datenverarbeitung verursacht.

Das zweite Problem ist das ernstere. Wie bereits erwähnt, wird bei einer week-Eingabe der tatsächliche Wert immer in das Format yyyy-Www normalisiert. Wenn der Browser auf eine generische Texteingabe zurückfällt, gibt es nichts, was den Benutzer zur korrekten Formatierung der Eingabe führt (und es ist sicherlich nicht intuitiv). Es gibt mehrere Möglichkeiten, wie Menschen Wochenwerte schreiben könnten, zum Beispiel:

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

Der beste Weg, um mit Wochen/Jahren in Formularen auf eine plattformübergreifende Weise umzugehen, besteht derzeit darin, den Benutzer dazu zu bringen, die Wochennummer und das Jahr in separaten Steuerelementen einzugeben (<select>-Elemente sind beliebt; siehe unten für ein Beispiel), oder verwenden Sie JavaScript-Bibliotheken wie jQuery date picker.

In diesem Beispiel erstellen wir zwei Sets von UI-Elementen zum Auswählen von Wochen: einen nativen Picker, erstellt mit <input type="week">, und ein Set aus zwei <select>-Elementen zum Auswählen von Wochen/Jahren in älteren Browsern, die den week-Eingabetyp nicht unterstützen.

Das HTML 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 von untenstehendem 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;
}

Der andere Teil des Codes, der von Interesse sein könnte, ist der Feature-Erkennungscode. 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 gesetzt ist. Nicht unterstützende Browser geben text zurück, weil der week-Typ auf Typ text zurückfällt. Wenn <input type="week"> nicht unterstützt wird, verstecken wir den nativen Picker und zeigen stattdessen die Ersatz-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);
  }
}

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