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

François 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 showPicker()-Methode für HTMLInputElement ausgeliefert. Dies ist eine kanonische 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 das Datum anzeigen lassen?

Stack Overflow

Die aktuellen Antworten sind nicht optimal, da sie auf externen Bibliotheken, CSS-Hacks oder bestimmten Browserverhalten basieren, z. B. der Simulation einer Nutzerinteraktion mit click().

Wir freuen uns, Ihnen mitteilen zu können, dass diese Zeiten bald vorbei sein werden, da auf der Webplattform eine kanonische Methode zum Anzeigen einer Browserauswahl für <input>-Elemente mit den folgenden Typen eingeführt wird: "date", "month", "week", "time", "datetime-local", "color" und "file". Das funktioniert auch für <input>-Elemente mit Vorschlägen, die von <datalist> oder "autocomplete" generiert werden. Das wird ebenfalls in diesem Artikel behandelt.

Screenshots von Browserauswahlen
Browser-Datumsauswahlen in Chrome für Computer, Chrome für Mobilgeräte, Safari für Computer, Safari für Mobilgeräte und Firefox für Computer (Juli 2021)

Auswahl anzeigen

Wenn Sie showPicker() für ein <input>-Element aufrufen, wird dem Nutzer eine Browserauswahl angezeigt. Sie muss als Reaktion auf eine Nutzeraktion wie eine Touch-Geste oder einen Mausklick aufgerufen werden. Andernfalls schlägt sie mit der Ausnahme NotAllowedError fehl. Aus Sicherheitsgründen wird eine SecurityError-Ausnahme ausgelöst, wenn die Methode in einem Cross-Origin-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 eine Datumsauswahl im 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>

Eine Browserauswahl kann auch mit Elementen aus <datalist> oder "autocomplete" vorausgefüllt 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

So prüfen Sie, ob showPicker() unterstützt wird:

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

Demo

Unter https://cdpn.io/web-dot-dev/fullpage/LEVKVdr finden Sie eine Demo, in der Sie alle vom Browser unterstützten Auswahlmöglichkeiten ausprobieren können.

Unterstützte Browser

showPicker() ist ab Chrome 99 verfügbar.

Nächste Schritte

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

  • Möglicherweise fügen wir dem <select>-Element in Zukunft ein ähnliches showPicker() hinzu, wenn Webentwickler dies wünschen.
  • Möglicherweise ist closePicker() nützlich. Wir könnten diese Funktion hinzufügen, wenn Webentwickler sie anfordern.
  • Wir könnten eine Berechtigungsrichtlinie hinzufügen, die es ursprungsübergreifenden iFrames erlaubt, Browserauswahlen anzuzeigen, wenn ihre übergeordnete Kette dies zulässt.

Feedback

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

Informationen zum Design

Funktioniert etwas bei showPicker() nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie für die Umsetzung Ihrer Idee benötigen? 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 einen Fehler in der Chrome-Implementierung gefunden? Oder weicht die Implementierung von der Spezifikation ab?

  • Melden Sie einen Fehler unter https://new.crbug.com. Geben Sie so viele Details wie möglich an und fügen Sie eine einfache Anleitung zur Reproduktion hinzu.

Unterstützung zeigen

Planen Sie, showPicker() zu 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 die Funktion verwenden.

Danksagungen

Vielen Dank an Joe Medley für die Überprüfung dieses Artikels. Kalenderbild von Eric Rothermel auf Unsplash.