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 canonieke manier om een ​​browserkiezer niet alleen voor datums, maar ook voor tijd, kleur en bestanden weer te geven.

Achtergrond

Een vaak gehoord verzoek van webontwikkelaars is:

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

Stapeloverloop

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

Ik ben blij te kunnen meedelen dat die dagen snel voorbij zullen zijn nu het webplatform een ​​canonieke manier introduceert om een ​​browserkiezer voor <input> -elementen met de volgende typen weer te geven: "date" , "month" , "week" , "time" , "datetime-local" , "color" en "file" . Het werkt ook voor <input> -elementen met suggesties mogelijk gemaakt door <datalist> of "autocomplete" die we ook in dit artikel zullen bespreken.

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

Een kiezer weergeven

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

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

In het onderstaande voorbeeld ziet u hoe u een browserdatumkiezer 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" .

In het onderstaande voorbeeld ziet u 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.
}

Demo

Er is een demo beschikbaar op https://show-picker.glitch.me/demo.html zodat je kunt spelen met alle pickers die door de browser worden ondersteund.

Browser-ondersteuning

showPicker() is beschikbaar in Chrome 99 of hoger.

Wat is het volgende

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

  • Mogelijk willen we in de toekomst een soortgelijke showPicker() toevoegen aan het <select> -element, als webontwikkelaars daarom vragen.
  • Het is mogelijk dat closePicker() nuttig kan zijn, en we zouden kunnen overwegen om dat toe te voegen als webontwikkelaars erom vragen.
  • We zouden een toestemmingsbeleid kunnen toevoegen waarmee cross-origin iframes browserkiezers kunnen tonen wanneer hun bovenliggende keten hen dat toestaat.

Feedback

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

Vertel ons over het ontwerp

Is er iets aan showPicker() dat niet werkt zoals je had verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren? Heeft u een vraag of opmerking over het beveiligingsmodel?

Probleem met de implementatie?

Heeft u een bug gevonden in de implementatie van Chrome? Of wijkt de uitvoering af van de specificaties?

  • Dien een bug in op https://new.crbug.com . Zorg ervoor dat u zoveel mogelijk details en eenvoudige reproductie-instructies opneemt. Glitch werkt uitstekend voor het delen van snelle en gemakkelijke reproducties.

Toon steun

Bent u van plan showPicker() te gebruiken? Uw publieke steun helpt het Chrome-team prioriteiten te stellen voor 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. Kalenderafbeelding foto door Eric Rothermel op Unsplash .