<input type="week"> HTML-Attributwert

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 der Steuerelemente variiert je nach Browser. Die Unterstützung über Browser hinweg ist derzeit etwas begrenzt, da momentan nur Chrome/Opera und Microsoft Edge dies unterstützen. In nicht unterstützten Browsern wird das Steuerelement elegant heruntergestuft, um identisch mit <input type="text"> zu funktionieren.

Wert

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

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

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

Ein wichtiger Punkt ist, dass das angezeigte Format sich vom tatsächlichen value unterscheiden kann, das immer im Format yyyy-Www formatiert ist. Wenn der obige Wert beispielsweise an den Server übermittelt wird, könnten Browser diesen als Woche 01, 2017 anzeigen, aber der übermittelte Wert wird immer wie week=2017-W01 aussehen.

Sie können den Wert auch in JavaScript mittels der value Eigenschaft des Input-Elements abrufen und setzen, beispielsweise:

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

Zusätzliche Attribute

Zusätzlich zu den für <input> Elemente üblichen Attributen bieten Woche-Eingaben die folgenden Attribute.

max

Das späteste (zeitlich gesehen) Jahr und die Wochennummer, im im Wert-Abschnitt oben beschriebenen Stringformat akzeptiert wird. Wenn der in das Element eingegebene value diesen übersteigt, scheitert das Element an der Einschränkungsvalidierung. Wenn der Wert des max-Attributes kein gültiger Wochenstring ist, hat das Element keinen maximalen Wert.

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

min

Das früheste Jahr und Woche, die akzeptiert werden. Wenn der value des Elements kleiner ist als dieser, scheitert das Element an der Einschränkungsvalidierung. Wenn ein Wert für min angegeben wird, der kein gültiger Wochenstring ist, hat die Eingabe keinen Mindestwert.

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

readonly

Ein Boolean-Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch weiterhin von 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, an die sich der Wert halten muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die eine ganze Anzahl von Schritten von der Schrittbasis entfernt sind, sind gültig. Die Schrittbasis ist min, falls angegeben, andernfalls value, oder -259.200.000 (der Beginn der Woche 1970-W01), wenn kein solcher Wert angegeben ist.

Für week Eingaben wird der Wert von step in Wochen angegeben und als Anzahl von Millisekunden behandelt, die 604.800.000 mal dem step-Wert entspricht (der zugrunde liegende numerische Wert ist in Millisekunden). Der Standardwert ist 1, was 1 Woche anzeigt.

Ein Stringwert von any bedeutet, dass kein festgelegter Schritt angewendet wird, und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen wie min und max). In der Realität hat es die gleiche Wirkung wie 1 für week Eingaben, da die AuswahluI nur erlaubt ganze Wochen auszuwählen.

Verwendung von Woche-Eingaben

Woche-Eingaben 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, normalisieren, unabhängig vom Browser oder der Lokalisierung 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 man das Browser-Unterstützungsproblem später (siehe Umgang mit Browser-Unterstützung) mildern kann.

Grundlegende Verwendungen von Woche

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

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

Eingabegröße steuern

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

Verwenden des Step-Attributes

Sie sollten in der Lage sein, das step-Attribut zu verwenden, um die Anzahl der Wochen, die übersprungen werden, zu variieren, wann immer sie erhöht oder verringert werden. Es scheint jedoch 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 Sie in der Regel nichts eingeben, das keine gültige Woche/Jahr ist, was hilfreich ist. Es ist jedoch 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 einzuschränken, die vom Benutzer gewählt werden können. 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 das CSS, das im obigen Beispiel verwendet wurde. Hier nutzen wir die :valid und :invalid CSS-Eigenschaften, um die Eingabe basierend darauf zu gestalten, ob der aktuelle Wert gültig ist. Wir mussten die Symbole auf einem <span> neben der Eingabe platzieren, nicht auf der Eingabe selbst, weil in Chrome der generierte Inhalt innerhalb des Formularsteuerelements 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 angesehen und in unterstützenden Browsern auswählbar sein werden.

Wochenwerte erforderlich machen

Zusätzlich können Sie das required-Attribut verwenden, um das Ausfüllen der Woche obligatorisch zu machen. Als Ergebnis werden unterstützende Browser einen Fehler anzeigen, wenn Sie versuchen, ein leeres Wochenfeld abzusenden.

Lassen Sie uns ein Beispiel betrachten. Hier haben wir minimale und maximale Wochen eingestellt 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. Versuchen Sie jetzt, mit dem Beispiel zu experimentieren:

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

Umgang mit der Browser-Unterstützung

Wie oben erwähnt, ist das Hauptproblem bei der Verwendung von Woche-Eingaben derzeit die Browser-Unterstützung: Safari und Firefox unterstützen es nicht auf dem Desktop, und alte Versionen von IE unterstützen es nicht.

Mobile Plattformen wie Android und iOS nutzen diese Eingabetypen perfekt, indem sie spezialisierte UI-Steuerelemente bereitstellen, 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 wechseln eleganterweise zu einer Texteingabe, aber dies führt sowohl in Bezug auf die Konsistenz der Benutzeroberfläche (das präsentierte Steuerelement wird anders sein) als auch die Datenverarbeitung zu Problemen.

Das zweite Problem ist das ernstere. Wie bereits erwähnt, wird der tatsächliche Wert bei einer week Eingabe immer auf das Format yyyy-Www normalisiert. Wenn der Browser auf eine generische Texteingabe zurückfällt, gibt es nichts, das den Benutzer dahin führt, die Eingabe korrekt zu formatieren (und es ist sicherlich nicht intuitiv). Es gibt mehrere Möglichkeiten, wie Leute 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 auf eine browserübergreifende Art und 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 JavaScript-Bibliotheken wie den 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 wird, 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 wie folgt 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 folgenden 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 dann sofort, welcher type gesetzt ist. Nicht unterstützende Browser geben text zurück, weil 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 stattdessen die Fallback-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);
  }
}

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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