Browserauswahl für Datum, Uhrzeit, Farbe und Dateien anzeigen

Beaufort
François Beaufort
GitHub

Lange Zeit mussten Sie auf benutzerdefinierte Widget-Bibliotheken oder Hacks zurückgreifen, um eine Datumsauswahl anzuzeigen. Die Webplattform wird jetzt mit der HTMLInputElement-Methode showPicker() ausgeliefert, einer kanonischen Methode, um eine Browserauswahl nicht nur für Datumsangaben, sondern auch für Uhrzeit, Farbe und Dateien anzuzeigen.

Hintergrund

Eine häufige Anfrage von Webentwicklern lautet:

Wie kann ich programmatisch
eine Auswahl für Steuerelemente wie „Datum“ anzeigen?

Stack Overflow

Die aktuellen Antworten sind nicht besonders gut. Sie beruhen auf externen Bibliotheken, CSS-Hacks oder bestimmten Browserverhalten wie der Simulation einer Nutzerinteraktion mit click().

Sobald die Webplattform eine kanonische Möglichkeit zum Anzeigen einer Browserauswahl für <input>-Elemente mit diesen Typen einführt: "date", "month", "week", "time", "datetime-local", "color" und "file", werden diese Tage bald vorbei sein. Sie funktioniert auch für <input>-Elemente mit Vorschlägen von <datalist> oder "autocomplete", die wir in diesem Artikel ebenfalls behandeln werden.

Screenshots der Browserauswahl
Die Datumsauswahl im Browser in Chrome-Desktops, Chrome Mobile, Safari Mobile, Safari Mobile und Firefox (Juli 2021).

So blenden Sie eine Auswahl ein

Wenn Sie showPicker() für ein <input>-Element aufrufen, wird dem Nutzer eine Browserauswahl angezeigt. Sie muss als Reaktion auf eine Nutzergeste aufgerufen werden, z. B. auf eine Touch-Geste oder einen Mausklick. Andernfalls schlägt sie mit der Ausnahme NotAllowedError fehl. Aus Sicherheitsgründen wird eine SecurityError-Ausnahme ausgelöst, wenn sie in einem ursprungsübergreifenden iFrame aufgerufen wird.

Eine Browserauswahl wird angezeigt, wenn das <input>-Element einen der folgenden Typen hat: "date", "month", "week", "time", "datetime-local", "color" oder "file".

Im folgenden Beispiel sehen Sie, wie Sie die Datumsauswahl in einem Browser öffnen.

<input type="date">
<button>Show the date picker</button>

<script>
  const button = document.querySelector("button");
  const dateInput = document.querySelector("input");

  button.addEventListener("click", () => {
    try {
      dateInput.showPicker();
      // A date picker is shown.
    } catch (error) {
      // Use external library when this fails.
    }
  });
</script>

In der Browserauswahl können auch Elemente aus <datalist> oder "autocomplete" eingefügt werden.

Das folgende Beispiel zeigt, wie Sie mit <datalist> eine Browserauswahl öffnen.

<datalist id="ice-cream-flavors">
  <option value="Chocolate"> </option>
  <option value="Coconut"> </option>
  <option value="Mint"> </option>
  <option value="Strawberry"> </option>
  <option value="Vanilla"> </option>
</datalist>
<input type="text" list="ice-cream-flavors">
<button>Show the suggestions</button>

<script>
  const button = document.querySelector("button");
  const iceCreamFlavorsInput = document.querySelector("input");

  button.addEventListener("click", () => {
    try {
      iceCreamFlavorsInput.showPicker();
      // A picker containing some ice cream flavors is shown.
    } catch (error) {
      // Use external library when this fails.
    }
  });
</script>

Funktionserkennung

Mit dem folgenden Befehl kannst du prüfen, ob showPicker() unterstützt wird:

if ('showPicker' in HTMLInputElement.prototype) {
  // showPicker() is supported.
}

Demo

Unter https://show-picker.glitch.me/demo.html finden Sie eine Demo, mit der Sie mit allen vom Browser unterstützten Auswahlen experimentieren können.

Unterstützte Browser

showPicker() ist in Chrome 99 oder höher verfügbar.

Nächste Schritte

Zum Zeitpunkt der Erstellung dieses Dokuments ist showPicker() neu auf der Webplattform. Für die Funktion sind in Zukunft möglicherweise zusätzliche Schritte erforderlich:

  • Möglicherweise möchten wir dem <select>-Element in Zukunft eine ähnliche showPicker() hinzufügen, wenn Webentwickler danach fragen.
  • Möglicherweise ist closePicker() nützlich. Wenn Webentwickler danach fragen, könnten wir sie ergänzen.
  • Wir könnten eine Berechtigungsrichtlinie hinzufügen, die es ursprungsübergreifenden iFrames ermöglicht, eine Browserauswahl anzuzeigen, wenn ihre übergeordnete Kette dies zulässt.

Feedback

Das Chrome-Team und die Webstandards-Community möchten mehr über Ihre Erfahrungen mit showPicker() erfahren.

Erzählen Sie uns mehr über das Design

Gibt es etwas an showPicker(), das nicht so funktioniert wie erwartet? Oder fehlen Methoden oder Eigenschaften, um deine Idee zu implementieren? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell?

  • Melden Sie ein Spezifikationsproblem im whatWG GitHub-Repository oder fügen Sie Ihre Gedanken zu einem bestehenden Problem hinzu.

Probleme bei der Implementierung?

Haben Sie bei der Implementierung von Chrome einen Fehler gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation?

  • Melden Sie Fehler unter https://new.crbug.com. Geben Sie dabei so viele Details wie möglich und eine einfache Anleitung zum Reproduzieren an. Glitch eignet sich hervorragend zum Teilen von schnellen und einfachen Reproduktionen.

Unterstützung zeigen

Möchten Sie showPicker() verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

Senden Sie einen Tweet an @ChromiumDev und teilen Sie uns mit, wo und wie Sie sie verwenden.

Danksagungen

Vielen Dank an Joe Medley für die Rezension dieses Artikels. Foto eines Kalenders von Eric Rothermel auf Unsplash