<input type="week">

Die Benutzeroberfläche des Steuerungselements variiert je nach Browser; die plattformübergreifende Unterstützung ist derzeit etwas eingeschränkt, da nur Chrome/Opera und Microsoft Edge es derzeit unterstützen. In nicht unterstützenden Browsern wird das Steuerungselement sanft degradiert, um identisch wie <input type="text"> zu funktionieren.

Ein String, der den Wert der eingegebenen Woche/Jahr darstellt. Das Format des Datums- und Zeitwertes, das von diesem Eingabetyp verwendet wird, wird in Wochendaten beschrieben.

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

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

Etwas zu beachten ist, dass das angezeigte Format vom tatsächlichen value abweichen kann, welcher immer im Format yyyy-Www formatiert ist. Wenn der obige Wert an den Server gesendet wird, können Browser ihn beispielsweise als Woche 01, 2017 anzeigen, jedoch wird der übermittelte Wert immer wie week=2017-W01 aussehen.

Sie können den Wert auch in JavaScript abrufen und setzen, indem Sie die value-Eigenschaft des Eingabeelements verwenden, zum Beispiel:

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

Zusätzlich zu den bei <input>-Elementen üblichen Attributen bieten Wocheingaben die folgenden Attribute.

Der späteste (zeitlich gesehen) Jahr- und Wochennummerwert, im oben im Abschnitt Wert beschriebenen String-Format, der akzeptiert wird. Wenn der in das Element eingegebene value diesen Wert überschreitet, schlägt die Einschränkungsvalidierung des Elements fehl. Wenn der Wert des max-Attributs kein gültiger Wochendaten-String ist, hat das Element keinen Maximalwert.

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

Das früheste Jahr und Woche, die akzeptiert werden. Wenn der value des Elements kleiner ist als dieser, schlägt die Einschränkungsvalidierung des Elements fehl. Wenn ein Wert für min angegeben wird, der kein gültiger Wochendaten-String ist, hat die Eingabe keinen Mindestwert.

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

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

Das step-Attribut ist eine Zahl, die die Granularität angibt, der der Wert entsprechen muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die dem Schritt-Basispunkt (min, falls angegeben, value andernfalls, und ein geeigneter Standardwert, falls keiner davon bereitgestellt wird) entsprechen, sind gültig.

Ein String-Wert von any bedeutet, dass kein Schritt impliziert wird, und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen, wie min und max).

Bei 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 vorliegt). Der Standardwert von step ist 1, was 1 Woche angibt. Die standardmäßige Schrittbasis ist -259.200.000, was das Anfang der ersten Woche des Jahres 1970 ("1970-W01") repräsentiert.

Zu diesem Zeitpunkt ist unklar, was ein Wert von "any" für step bei der Verwendung mit week-Eingaben bedeutet. Dies wird aktualisiert, sobald diese Informationen bestimmt sind.

Wocheingaben scheinen auf den ersten Blick praktisch zu sein, da sie eine einfache Benutzeroberfläche zum Auswählen von Wochen bieten und das Datenformat normalisieren, das an den Server gesendet wird, unabhängig vom Browser oder Gebietsschema des Benutzers. Es gibt jedoch Probleme mit <input type="week">, da die Browserunterstützung nicht für alle Browser garantiert ist.

Wir betrachten zunächst grundlegende und komplexere Verwendungen von <input type="week"> und geben dann Ratschläge dazu, wie man das Problem der Browserunterstützung später lösen kann (siehe Umgang mit Browserunterstützung).

Die einfachste Verwendung von <input type="week"> umfasst eine einfache Kombination aus einem <input> und einem <label>-Element, wie unten zu sehen ist:

<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 Formgrößenattribute wie size. Sie müssen auf CSS zurückgreifen, um die Größenanforderungen zu erfüllen.

Sie sollten in der Lage sein, das step-Attribut zu verwenden, um die Anzahl der übersprungenen Wochen zu variieren, wann immer sie inkrementiert oder dekrementiert werden. In unterstützenden Browsern scheint es jedoch keine Auswirkungen zu haben.

Standardmäßig wendet <input type="week"> keine Validierung auf eingegebene Werte an. Die Benutzeroberflächenimplementierungen lassen Sie im Allgemeinen nichts angeben, was keine gültige Woche/Jahr ist, was hilfreich ist, aber es ist immer noch möglich, das Feld leer abzusenden, und Sie möchten möglicherweise den Bereich der auswählbaren Wochen einschränken.

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

<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 machen wir Gebrauch von den :valid- und :invalid-CSS-Eigenschaften, um die Eingabe basierend darauf zu stylen, ob der aktuelle Wert gültig ist. Wir mussten die Symbole auf ein <span> neben der Eingabe setzen, nicht auf die 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 sein werden.

Zusätzlich können Sie das required-Attribut verwenden, um das Ausfüllen der Woche verpflichtend 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. Versuchen Sie jetzt, mit dem Beispiel zu spielen:

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

Wie oben erwähnt, besteht das Hauptproblem bei der Verwendung von Wocheingaben derzeit in der Browserunterstützung: Safari und Firefox unterstützen dies nicht auf dem Desktop, und alte Versionen des IE unterstützen es nicht.

Mobile Plattformen wie Android und iOS nutzen solche Eingabetypen perfekt aus und bieten spezielle UI-Steuerelemente, die es wirklich einfach machen, Werte in einer Touchscreen-Umgebung auszuwählen. Beispielsweise sieht der week-Auswahl in Chrome für Android so aus:

Nicht unterstützende Browser wandeln sich sanft in ein Texteingabefeld zurück, aber dies erzeugt Probleme sowohl hinsichtlich der Konsistenz der Benutzeroberfläche (das präsentierte Steuerelement wird unterschiedlich sein) als auch der Datenverarbeitung.

Das zweite Problem ist das ernsthaftere. Wie bereits erwähnt, wird bei einer week-Eingabe der tatsächliche Wert immer zumindest im Format yyyy-Www normalisiert. Wenn der Browser auf ein generisches Texteingabeelement zurückfällt, gibt es nichts, das den Benutzer dazu anleitet, die Eingabe korrekt zu formatieren (und es ist sicherlich nicht intuitiv). Es gibt mehrere Möglichkeiten, wie Menschen Wochenwerte schreiben könnten; zum Beispiel:

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

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

In diesem Beispiel erstellen wir zwei Sätze von UI-Elementen zur Auswahl von Wochen: einen nativen Picker mit <input type="week"> 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 dynamisch vom unten gezeigten JavaScript-Code 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 Code zur Funktionsprüfung. 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 eingestellt ist. Nicht unterstützende Browser geben text zurück, da der week-Typ auf den Typ text zurückfällt. Wenn <input type="week"> nicht unterstützt wird, verbergen wir den nativen Picker und zeigen stattdessen das alternative 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
• In HTML verwendete Datums- und Zeitformate
• <input type="datetime-local">, <input type="date">, <input type="time">, und <input type="month">
• Kompatibilität von CSS-Eigenschaften