<input type="week">

<input>-Elemente des Typs week erstellen Eingabefelder, die eine einfache Eingabe eines Jahres plus der ISO 8601 Wochennummer während dieses Jahres ermöglichen (d.h. Woche 1 bis 52 oder 53).

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 variiert von Browser zu Browser; die Unterstützung über verschiedene Browser hinweg ist derzeit etwas eingeschränkt, da nur Chrome/Opera und Microsoft Edge es derzeit unterstützen. In nicht unterstützenden Browsern wird das Steuerelement so heruntergestuft, dass es identisch mit <input type="text"> funktioniert.

Wert

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

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

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

Eine wichtige Anmerkung ist, dass das angezeigte Format vom tatsächlichen value abweichen kann, das immer im Format yyyy-Www ist. Wenn der obige Wert zum Beispiel an den Server übermittelt wird, können Browser ihn als Woche 01, 2017 anzeigen, aber der übermittelte Wert wird immer als week=2017-W01 aussehen.

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

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

Zusätzliche Attribute

Zusätzlich zu den Attributen, die für <input>-Elemente üblich sind, bieten Wocheingaben die folgenden Attribute:

max

Das späteste (zeitlich gesehen) Jahr und die Wochennummer, im oben im Wert-Abschnitt beschriebenen String-Format, die akzeptiert werden. Wenn der in das Element eingegebene value diesen Wert überschreitet, schlägt das Element bei der Einschränkungsvalidierung 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 vom min-Attribut angegeben werden.

min

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

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

readonly

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

step

Das step-Attribut ist eine Zahl, die die Granularität angibt, die der Wert einhalten muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die dem Schritt-Basis (min falls definiert, value andernfalls und einem entsprechenden Standardwert, falls keiner von beiden angegeben ist) entsprechen, sind gültig.

Ein String-Wert von any bedeutet, dass kein Schritt angenommen wird 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 angegeben wird). Der Standardwert von step ist 1, was 1 Woche anzeigt. Die Standard-Schritt-Basis ist -259.200.000, was der Beginn der ersten Woche von 1970 ("1970-W01") ist.

Obwohl es derzeit unklar ist, was ein Wert von "any" für step bei der Verwendung mit week-Eingaben bedeutet, wird diese Information aktualisiert, sobald sie festgestellt wird.

Verwendung von Wocheingaben

Wocheingaben klingen auf den ersten Blick praktisch, da sie eine einfache Benutzeroberfläche für die Auswahl von Wochen bieten und das Datenformat normalisieren, das an den Server gesendet wird, unabhängig von Browser oder Gebietsschema des Benutzers. Allerdings gibt es Probleme mit <input type="week">, da die Unterstützung in allen Browsern nicht garantiert ist.

Wir betrachten einfache und komplexere Anwendungen von <input type="week"> und geben anschließend Ratschläge zur Abmilderung des Problems der Browser-Unterstützung (siehe Umgang mit Browser-Unterstützung).

Grundlegende Verwendungen von Woche

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

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

Steuerung der Input-Größe

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

Verwendung des step-Attributs

Sie sollten in der Lage sein, das step-Attribut zu verwenden, um die Anzahl der übersprungenen Wochen zu variieren, wann immer diese erhöht oder verringert werden, allerdings scheint es in unterstützenden Browsern keine Wirkung zu haben.

Validierung

Standardmäßig wendet <input type="week"> keine Validierung auf eingegebene Werte an. Die UI-Implementierungen lassen einen zwar in der Regel nichts angeben, was keine gültige Woche/Jahr ist, was hilfreich ist, aber es ist immer noch möglich, mit einem leeren Feld zu übermitteln und Sie möchten möglicherweise den Bereich der auswählbaren Wochen einschränken.

Festlegen von maximalen und minimalen Wochen

Sie können die min und max-Attribute verwenden, um die gültigen Wochen zu beschrä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 wurde. 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 in einem <span> neben der Eingabe und nicht in der Eingabe selbst platzieren, 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 hier, dass nur Wochen zwischen W01 und W52 im Jahr 2017 als gültig angesehen und in unterstützenden Browsern ausgewählt werden.

Woche-Werte erforderlich machen

Darüber hinaus können Sie das required-Attribut verwenden, um das Ausfüllen der Woche zwingend zu machen. Dadurch zeigen unterstützende Browser einen Fehler an, wenn Sie versuchen, ein leeres Woche-Feld zu übermitteln.

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

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

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

Umgang mit Browser-Unterstützung

Wie oben erwähnt, ist das größte Problem bei der Verwendung von Wocheingaben derzeit die Unterstützung von Browsern: Safari und Firefox unterstützen es nicht auf dem Desktop, und alte Versionen des IE unterstützen es nicht.

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

Nicht unterstützende Browser fallen sanft in eine Texteingabe zurück, aber dies schafft Probleme sowohl in Bezug auf die Konsistenz der Benutzeroberfläche (das präsentierte Steuerelement wird anders sein) als auch auf die Datenverarbeitung.

Das zweite Problem ist das ernstere. Wie bereits erwähnt, wird bei einer week-Eingabe der tatsächliche Wert immer im Format yyyy-Www normalisiert. Wenn der Browser in eine generische Texteingabe zurückfällt, gibt es nichts, was den Benutzer zu einem korrekt formatierten Eingang 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 Woche/Jahr in Formularen derzeit auf browserübergreifende Weise umzugehen, besteht darin, den Benutzer zu bitten, die Wochennummer und das Jahr in separaten Steuerelementen einzugeben (<select>-Elemente sind beliebt; siehe unten für ein Beispiel) oder JavaScript-Bibliotheken wie jQuery date picker zu verwenden.

Beispiele

In diesem Beispiel erstellen wir zwei Sätze von UI-Elementen zur Auswahl von Wochen: einen nativen Picker, der mit <input type="week"> erstellt wurde, und einen Satz von zwei <select>-Elementen zur Auswahl 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 unten stehenden 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 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 sofort, was sein type 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, verstecken wir den nativen Picker und zeigen die fallback Picker UI (<select>s) stattdessen.

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

• HTML
  # week-state-(type=week)

Browser-Kompatibilität

Siehe auch

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