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 deviez recourir à des bibliothèques de widgets personnalisées ou à des astuces pour afficher un sélecteur de date. La plate-forme Web est désormais fournie avec la méthode showPicker() HTMLInputElement, qui permet d'afficher un sélecteur de navigateur non seulement pour les dates, mais aussi pour l'heure, la couleur et les fichiers.

Contexte

Voici une demande fréquente que nous recevons de la part des développeurs Web:

Comment afficher un sélecteur pour des commandes telles que la date de manière programmatique ?

Stack Overflow

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

Je suis heureux de vous annoncer que ces jours sont bientôt révolus, car la plate-forme Web introduit une méthode canonique pour afficher un sélecteur de navigateur pour les éléments <input> avec les types suivants: "date", "month", "week", "time", "datetime-local", "color" et "file". Il fonctionne également pour les éléments <input> avec des suggestions optimisées par <datalist> ou "autocomplete", que nous aborderons également dans cet article.

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

Afficher un sélecteur

L'appel de showPicker() sur un élément <input> présente un sélecteur de navigateur à l'utilisateur. Il doit être appelé en réponse à un geste de l'utilisateur, tel qu'un geste tactile ou un clic de souris. Sinon, il é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 cross-origin.

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

L'exemple ci-dessous montre comment ouvrir un sélecteur de date du 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 montre comment ouvrir un sélecteur 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 caractéristiques

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

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

Démo

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

Étape suivante

Au moment de la rédaction de cet article, showPicker() est nouveau sur la plate-forme Web. Cette fonctionnalité pourrait nécessiter des efforts supplémentaires à l'avenir:

  • À l'avenir, nous pourrons ajouter un showPicker() semblable à l'élément <select>, si les développeurs Web nous 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 inter-origines d'afficher des 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 connaître vos expériences avec showPicker().

Parlez-nous de la conception

showPicker() ne fonctionne-t-il pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés dont vous avez besoin pour implémenter 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 commentaires à un problème existant.

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 de la spécification ?

  • Signalez un bug sur https://new.crbug.com. Veillez à inclure autant de détails que possible et des instructions simples pour reproduire le problème. Glitch est idéal pour partager des reproductions rapides et faciles.

Montrez votre soutien

Prévoyez-vous d'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 et dites-nous où et comment vous l'utilisez.

Remerciements

Merci à Joe Medley d'avoir lu cet article. Photo d'agenda par Eric Rothermel sur Unsplash.