<input type="week">
<input>
-Elemente vom Typ week
erstellen Eingabefelder, die eine einfache Eingabe eines Jahres plus der ISO 8601 Wochennummer während dieses Jahres (d.h. Woche 1 bis 52 oder 53) ermöglichen.
Probieren Sie es aus
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.
Wert
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";
Zusätzliche Attribute
Neben den allgemeinen Attributen für <input>
-Elemente bieten Wochen-Eingaben die folgenden Attribute.
max
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.
min
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.
readonly
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.
Hinweis: Da ein schreibgeschütztes Feld keinen Wert haben kann, hat required
keinen Effekt auf Eingaben mit dem ebenfalls spezifizierten readonly
-Attribut.
step
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
).
Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht mit der Schrittkonfiguration übereinstimmen, kann der User Agent auf den nächsten gültigen Wert runden, wobei Zahlen in positiver Richtung bevorzugt werden, wenn zwei gleich nah beieinander liegende Optionen vorhanden sind.
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.
Verwendung von Wochen-Eingaben
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).
Grundlegende Verwendung von week
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>
Steuern der Eingabengröße
Verwendung des step
-Attributs
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.
Validierung
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.
Festlegen von maximalen und minimalen Wochen
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.
Erforderlich machen von Wochenwerten
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:
Warnung: HTML-Formularvalidierung ist kein Ersatz für Skripte, die sicherstellen, dass die eingegebenen Daten im richtigen Format vorliegen. Es ist viel zu einfach, Anpassungen am HTML vorzunehmen, die es einer Person ermöglichen, die Validierung zu umgehen oder sie vollständig zu entfernen. Außerdem ist es möglich, dass jemand Ihr HTML vollständig umgeht und die Daten direkt an Ihren Server sendet. Wenn Ihr serverseitiger Code die empfangenen Daten nicht validiert, könnte es zu Problemen kommen, wenn falsch formatierte Daten (oder Daten, die zu groß, vom falschen Typ usw. sind) übermittelt werden.
Umgang mit der Browser-Unterstützung
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.
Beispiele
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.
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);
}
}
Hinweis: Denken Sie daran, dass einige Jahre 53 Wochen haben (siehe Weeks per year)! Sie sollten dies berücksichtigen, wenn Sie Produktionsanwendungen entwickeln.
Technische Zusammenfassung
Wert | Ein String, der eine Woche und ein Jahr darstellt, oder leer |
Ereignisse | [`change`](/de/docs/Web/API/HTMLElement/change_event) und [`input`](/de/docs/Web/API/Element/input_event) |
Unterstützte allgemeine Attribute |
autocomplete ,
list ,
readonly ,
step
|
IDL-Attribute |
list ,
value ,
valueAsDate ,
valueAsNumber
|
DOM-Schnittstelle |
[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement) |
Methoden | [`select()`](/de/docs/Web/API/HTMLInputElement/select), [`stepDown()`](/de/docs/Web/API/HTMLInputElement/stepDown), und [`stepUp()`](/de/docs/Web/API/HTMLInputElement/stepUp) |
Implizite ARIA-Rolle | keine entsprechende Rolle |
Spezifikationen
Specification |
---|
HTML Standard # week-state-(type=week) |
Browser-Kompatibilität
BCD tables only load in the browser
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">
- Kompatibilität von CSS-Eigenschaften