Toon een browserkiezer voor datum, tijd, kleur en bestanden

François Beaufort
François Beaufort
GitHub

Lange tijd moest je je toevlucht nemen tot aangepaste widgetbibliotheken of hacks om een datumkiezer weer te geven. Het webplatform wordt nu geleverd met de HTMLInputElement showPicker() -methode, een standaardmethode om een browserkiezer weer te geven, niet alleen voor datums, maar ook voor tijd, kleur en bestanden.

Achtergrond

Een veelgehoorde vraag van webontwikkelaars is:

Hoe kan ik programmatisch
een kiezer weergeven voor besturingselementen zoals datum?

Stapeloverloop

De huidige antwoorden zijn niet geweldig. Ze zijn afhankelijk van externe bibliotheken, CSS-hacks of specifiek browsergedrag, zoals het simuleren van een gebruikersinteractie met click() .

Ik ben blij te kunnen melden dat die dagen binnenkort voorbij zijn, aangezien het webplatform een standaardmethode introduceert om een browserkiezer weer te geven voor <input> -elementen met de volgende typen: "date" , "month" , "week" , "time" , "datetime-local" , "color" en "file" . Het werkt ook voor <input> -elementen met suggesties die worden aangestuurd door <datalist> of "autocomplete" , die we in dit artikel ook zullen bespreken.

Schermafbeeldingen van browserkiezers
Browserdatumkiezers in Chrome desktop, Chrome mobiel, Safari desktop, Safari mobiel en Firefox desktop (juli 2021).

Hoe een picker te tonen

Door showPicker() aan te roepen op een <input> -element, wordt een browserkiezer aan de gebruiker getoond. Dit moet worden aangeroepen als reactie op een gebruikersgebaar, zoals een aanraakgebaar of muisklik; anders mislukt de aanroep met een NotAllowedError -uitzondering. Om beveiligingsredenen genereert de aanroep een SecurityError uitzondering wanneer deze wordt aangeroepen in een cross-origin iframe.

Er wordt een browserkiezer weergegeven wanneer het <input> -element van een van de volgende typen is: "date" , "month" , "week" , "time" , "datetime-local" , " "color" "file" .

Het onderstaande voorbeeld laat zien hoe u een datumkiezer in uw browser opent.

<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>

Een browserkiezer kan ook vooraf worden gevuld met items uit <datalist> of "autocomplete" .

Het onderstaande voorbeeld laat zien hoe u een browserkiezer opent met <datalist> .

<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>

Functiedetectie

Om te controleren of showPicker() wordt ondersteund, gebruikt u:

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

Demonstratie

Er is een demo beschikbaar op https://cdpn.io/web-dot-dev/fullpage/LEVKVdr zodat u met alle pickers kunt spelen die door de browser worden ondersteund.

Browserondersteuning

showPicker() is beschikbaar in Chrome 99 of later.

Wat volgt er?

Op het moment van schrijven is showPicker() nieuw op het webplatform. Mogelijk is er in de toekomst nog meer werk nodig aan de functie:

  • Het kan zijn dat we in de toekomst een vergelijkbare showPicker() aan het <select> -element willen toevoegen, als webontwikkelaars daarom vragen.
  • Het is mogelijk dat closePicker() nuttig kan zijn en we kunnen overwegen om dit toe te voegen als webontwikkelaars erom vragen.
  • We zouden een machtigingsbeleid kunnen toevoegen waardoor cross-origin iframes browserpickers kunnen tonen als de bovenliggende keten dit toestaat.

Feedback

Het Chrome-team en de webstandaardencommunity willen graag uw ervaringen met showPicker() horen.

Vertel ons over het ontwerp

Werkt showPicker() niet zoals verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren? Heb je een vraag of opmerking over het beveiligingsmodel?

Probleem met de implementatie?

Heb je een bug gevonden in de implementatie van Chrome? Of wijkt de implementatie af van de specificatie?

  • Meld een bug op https://new.crbug.com . Zorg ervoor dat je zoveel mogelijk details en eenvoudige instructies voor reproductie verstrekt.

Toon steun

Bent u van plan showPicker() te gebruiken? Uw publieke steun helpt het Chrome-team bij het prioriteren van functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Stuur een tweet naar @ChromiumDev en laat ons weten waar en hoe je het gebruikt.

Dankbetuigingen

Met dank aan Joe Medley voor het beoordelen van dit artikel. Foto van de kalenderafbeelding door Eric Rothermel op Unsplash .