Afficher un outil de sélection du navigateur pour la date, l'heure, la couleur et les fichiers

François Beaufort
François Beaufort
GitHub

Pendant longtemps, vous avez dû recourir à des bibliothèques de widgets personnalisés ou à des astuces pour afficher un sélecteur de date. La plate-forme Web intègre désormais la méthode HTMLInputElement showPicker(), un moyen canonique d'afficher un sélecteur de navigateur pour les dates, mais aussi l'heure, la couleur et les fichiers.

Contexte

Les développeurs Web nous demandent fréquemment:

Comment afficher par programmation
un sélecteur pour des commandes comme la date ?

Stack Overflow

Les réponses actuelles ne sont pas pertinentes. Elles reposent sur des bibliothèques externes, des piratages CSS ou des comportements de navigateur spécifiques tels que la simulation d'une interaction utilisateur avec click().

J'ai le plaisir de vous annoncer que cette époque sera bientôt révolue, car la plate-forme Web proposera une méthode canonique pour afficher un sélecteur de navigateur pour les éléments <input> de types suivants: "date", "month", "week", "time", "datetime-local", "color" et "file". Elle fonctionne également pour les éléments <input> avec des suggestions fournies par <datalist> ou "autocomplete", que nous aborderons également dans cet article.

Captures d&#39;écran des sélecteurs de navigateur
Sélecteurs de date dans les navigateurs Chrome pour ordinateur, Chrome pour mobile, pour ordinateur Safari, Safari pour mobile et Firefox (juillet 2021)

Afficher un outil de sélection

L'appel de showPicker() sur un élément <input> affiche un sélecteur de navigateur à l'utilisateur. Elle doit être appelée en réponse à un geste de l'utilisateur, comme une pression ou un clic de souris. Sinon, elle échouera avec une exception NotAllowedError. Pour des raisons de sécurité, une exception SecurityError est générée lorsqu'elle est appelée dans un iFrame multi-origine.

Un sélecteur de navigateur s'affiche lorsque l'élément <input> est de l'un des types suivants : "date", "month", "week", "time", "datetime-local", "color" ou "file".

L'exemple ci-dessous vous montre comment ouvrir le sélecteur de date dans un navigateur.

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

Un sélecteur de navigateur peut également être prérempli avec des éléments de <datalist> ou "autocomplete".

L'exemple ci-dessous vous montre comment ouvrir un outil de sélection de navigateur avec <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>

Détection de fonctionnalités

Pour vérifier si showPicker() est compatible, utilisez:

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

Démonstration

Une version de démonstration est disponible à l'adresse https://show-picker.glitch.me/demo.html pour vous permettre de jouer avec tous les sélecteurs compatibles avec le navigateur.

Prise en charge des navigateurs

showPicker() est disponible dans Chrome 99 ou version ultérieure.

Étapes suivantes

Au moment de la rédaction de ce document, showPicker() est nouveau sur la plate-forme Web. Cette fonctionnalité peut nécessiter des améliorations supplémentaires par la suite:

  • Il se peut que nous ajoutions ultérieurement un showPicker() similaire à l'élément <select>, si les développeurs Web le demandent.
  • Il est possible que closePicker() soit utile, et nous pourrions envisager de l'ajouter si les développeurs Web le demandent.
  • Nous pourrions ajouter une règle d'autorisation qui permet aux iFrames multi-origines d'afficher les sélecteurs de navigateur lorsque leur chaîne parente leur permet de le faire.

Commentaires

L'équipe Chrome et la communauté des normes Web souhaitent en savoir plus sur votre expérience avec showPicker().

Parlez-nous de la conception

Y a-t-il quelque chose concernant showPicker() qui ne fonctionne pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ?

  • Signalez un problème de spécification dans le dépôt GitHub whatWG ou ajoutez vos réflexions à un problème existant.

Un problème d'implémentation ?

Avez-vous détecté un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente des spécifications ?

  • Signalez le bug à l'adresse https://new.crbug.com. Veillez à inclure autant de détails que possible, ainsi que des instructions simples pour reproduire le bug. Glitch est idéal pour partager des reproductions rapides et faciles.

Montrez votre soutien

Comptez-vous utiliser showPicker() ? Votre assistance publique aide l'équipe Chrome à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.

Envoyez un tweet à @ChromiumDev pour nous indiquer où et comment vous l'utilisez.

Remerciements

Merci à Joe Medley d'avoir consulté cet article. Photo de l'agenda par Eric Rothermel sur Unsplash.