<input type="week">

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 fällt das Steuerelement anmutig auf dieselbe Funktionalität wie <input type="text"> zurück.

Ein String, der den Wert der in das Eingabefeld eingegebenen Woche/Jahr darstellt. Das Format des für diesen Eingabetyp verwendeten Datums- und Zeitwerts wird in Week strings beschrieben.

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

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

Ein zu beachtender Punkt ist, dass das angezeigte Format von dem tatsächlichen value abweichen kann, das immer im Format yyyy-Www ist. Wenn der obige Wert beispielsweise an den Server übermittelt wird, können ihn Browser als Week 01, 2017 anzeigen, aber der übermittelte Wert wird immer als week=2017-W01 aussehen.

Sie können den Wert auch in JavaScript mit der value-Eigenschaft des Eingabeelements abrufen und festlegen:

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

Neben den allgemeinen Attributen für <input>-Elemente bieten Wochen-Eingaben die folgenden Attribute.

Das zeitlich späteste Jahr und die Wochennummer im oben im Abschnitt Wert besprochenen String-Format, das 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 Wochen-String ist, hat das Element keinen maximalen Wert.

Dieser Wert muss größer als oder gleich dem vom min-Attribut angegebenen Jahr und Woche sein.

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

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

Ein Boolean-Attribut, das, wenn vorhanden, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch weiterhin durch JavaScript-Code geändert werden, der direkt die value-Eigenschaft des HTMLInputElement setzt.

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

Ein String-Wert von any bedeutet, dass kein Schrittablauf impliziert wird und jeder Wert zulässig ist (außer anderen 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 angegeben ist). Der Standardwert von step ist 1, was 1 Woche bedeutet. Der Standard-Schrittbasiswert ist -259.200.000, was dem Beginn der ersten Woche von 1970 ("1970-W01") entspricht.

Zu diesem Zeitpunkt ist unklar, was ein Wert von "any" für step bedeutet, wenn er mit week-Eingaben verwendet wird. Dies wird aktualisiert, sobald diese Informationen feststehen.

Wochen-Eingaben klingen auf den ersten Blick praktisch, da sie eine einfache Benutzeroberfläche zur Auswahl von Wochen bieten und das an den Server gesendete Datenformat unabhängig vom Browser oder der Region des Benutzers normalisieren. Es gibt jedoch Probleme mit <input type="week">, da die Unterstützung durch den Browser nicht in allen Browsern gewährleistet ist.

Wir werden uns die grundlegende und komplexere Verwendung von <input type="week"> ansehen und dann Ratschläge zur Bewältigung des Browser-Unterstützungsproblems geben (siehe Umgang mit der Browser-Unterstützung).

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

<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 Größenattribute 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. Dies scheint jedoch keine Auswirkungen auf unterstützende Browser zu haben.

Standardmäßig wendet <input type="week"> keine Validierung für eingegebene Werte an. Die UI-Implementierungen lassen in der Regel keine Eingaben zu, die keine gültige Woche/Jahr sind, was hilfreich ist, aber es ist immer noch möglich, den Wert mit dem leeren Feld abzugeben, und Sie möchten vielleicht 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 der Benutzer auswählen kann. Im folgenden Beispiel legen wir einen Mindestwert von Woche 01, 2017 und einen Höchstwert 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 der CSS-Code, der im obigen Beispiel verwendet wird. Hier verwenden wir die CSS-Eigenschaften :valid und :invalid, um das Eingabefeld 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 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 die Eingabe der Woche obligatorisch zu machen. Unterstützende Browser zeigen infolgedessen einen Fehler an, wenn Sie versuchen, ein leeres Wochenfeld abzugeben.

Schauen wir uns ein Beispiel an; hier haben wir Mindest- und Höchstwochen 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 einen Wert abzugeben, zeigt der Browser einen Fehler an. Probieren Sie das Beispiel jetzt aus:

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

Wie oben erwähnt, besteht das Hauptproblem bei der Verwendung von Wochen-Eingaben derzeit in der Browser-Unterstützung: Safari und Firefox unterstützen es nicht auf dem Desktop, und ältere Versionen von IE unterstützen es ebenfalls nicht.

Mobile Plattformen wie Android und iOS nutzen solche Eingabetypen perfekt und bieten spezialisierte 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 fallen anmutig auf eine Texteingabe zurück, aber dies führt sowohl zu Konsistenzproblemen bei der Benutzeroberfläche (das präsentierte Steuerelement wird anders sein) als auch zu Problemen bei der Datenverarbeitung.

Das zweite Problem ist das gravierendere. Wie bereits erwähnt, wird mit einer week-Eingabe der tatsächliche Wert immer auf das Format yyyy-Www normalisiert. Wenn der Browser auf eine generische Texteingabe zurückgreift, gibt es nichts, das den Benutzer anleitet, die Eingabe korrekt zu formatieren (und es ist sicherlich nicht intuitiv). Es gibt mehrere Weisen, auf die Personen Wochenwerte schreiben könnten; zum Beispiel:

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

Der beste Weg, derzeit Wochen/Jahre browserübergreifend in Formularen zu behandeln, ist, 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 jQuery date picker zu verwenden.

In diesem Beispiel erstellen wir zwei Sätze von UI-Elementen zum Auswählen von Wochen: einen nativen Picker, der mit <input type="week"> erstellt wurde, und einen Satz von 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 dynamisch durch den untenstehenden JavaScript-Code 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 Erkennung von Funktionen. 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 prüfen dann sofort, auf welchen type er gesetzt 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 die Rückfall-Picker-UI (<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
• Datums- und Zeitformate, die in HTML verwendet werden
• <input type="datetime-local">, <input type="date">, <input type="time">, und <input type="month">
• Kompatibilität von CSS-Eigenschaften