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 enthält jetzt die Methode „HTMLInputElement showPicker()“. 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 Frage von Webentwicklern:

Wie kann ich programmatisch eine Auswahl für Steuerelemente wie das Datum anzeigen lassen?

Stack Overflow

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

Ich freue mich, Ihnen mitteilen zu können, dass diese Tage bald vorbei sind. Auf der Webplattform wird eine kanonische Methode eingeführt, mit der eine Browserauswahl für <input>-Elemente mit den folgenden Typen angezeigt wird: "date", "month", "week", "time", "datetime-local", "color" und "file". Außerdem funktioniert es für <input>-Elemente mit Vorschlägen, die von <datalist> oder "autocomplete" stammen. Diese werden in diesem Artikel ebenfalls behandelt.

Screenshots der Browserauswahl
Datumsauswahl im Browser in Chrome (Computer), Chrome (Mobilgeräte), Safari (Computer), Safari (Mobilgeräte) und Firefox (Desktop) (Juli 2021).

So blenden Sie eine Auswahl ein

Wenn showPicker() für ein <input>-Element aufgerufen wird, wird dem Nutzer eine Browserauswahl angezeigt. Sie muss als Reaktion auf eine Nutzergeste wie eine Touch-Geste oder einen Mausklick aufgerufen werden. Andernfalls schlägt sie mit einer NotAllowedError-Ausnahme fehl. Aus Sicherheitsgründen wird eine SecurityError-Ausnahme ausgelöst, wenn die Methode 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 wird gezeigt, 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" vorab ausgefüllt werden.

Im Beispiel unten sehen Sie, 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://show-picker.glitch.me/demo.html findest du eine Demo, in der du alle vom Browser unterstützten Auswahlmöglichkeiten testen kannst.

Unterstützte Browser

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

Nächste Schritte

Zum Zeitpunkt der Erstellung dieses Artikels ist showPicker() neu auf der Webplattform. Die Funktion erfordert möglicherweise in Zukunft zusätzliche Arbeit:

  • Wir könnten dem <select>-Element in Zukunft eine ähnliche showPicker() hinzufügen, wenn Webentwickler danach fragen.
  • Möglicherweise ist closePicker() nützlich und wir könnten diese Option hinzufügen, wenn Webentwickler danach fragen.
  • Wir könnten eine Berechtigungsrichtlinie hinzufügen, die es iframes mit unterschiedlichen Ursprüngen erlaubt, Browserauswahlen anzuzeigen, wenn dies von ihrer übergeordneten Kette erlaubt ist.

Feedback

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

Designbeschreibung

Funktioniert showPicker() nicht wie erwartet? Fehlen Methoden oder Eigenschaften, die Sie für die Implementierung Ihrer Idee benötigen? Haben Sie Fragen oder Kommentare zum Sicherheitsmodell?

  • Melden Sie ein Problem mit der Spezifikation im WHATWG-GitHub-Repository oder fügen Sie Ihre Anmerkungen zu einem vorhandenen Problem hinzu.

Problem bei der Implementierung?

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

  • Melden Sie den Fehler unter https://new.crbug.com. Geben Sie dabei so viele Details wie möglich an und geben Sie eine einfache Anleitung zur Reproduktion an. Glitcheignet sich hervorragend, um schnell und einfach Reproduktionen zu teilen.

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, diese zu unterstützen.

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

Danksagungen

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