Pendant longtemps, vous deviez recourir à des bibliothèques de widgets personnalisés ou à des astuces pour afficher un sélecteur de date. La plate-forme Web est désormais fournie avec la méthode HTMLInputElement showPicker(), qui permet d'afficher un sélecteur de navigateur de manière canonique, non seulement pour les dates, mais aussi pour l'heure, la couleur et les fichiers.
Arrière-plan
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 idéales. Elles s'appuient sur des bibliothèques externes, des astuces CSS ou des comportements spécifiques du navigateur, comme la simulation d'une interaction utilisateur avec click().
Bonne nouvelle : 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". Cela fonctionnera également pour les éléments <input> avec des suggestions fournies par <datalist> ou "autocomplete", que nous aborderons également dans cet article.
Afficher un sélecteur
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, tel qu'un geste tactile ou un clic de souris. Sinon, elle échouera avec une exception NotAllowedError.
Pour des raisons de sécurité, une exception SecurityError sera générée lorsqu'elle sera 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 vous montre comment ouvrir un sélecteur de date de 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 la commande suivante :
if ('showPicker' in HTMLInputElement.prototype) {
// showPicker() is supported.
}
Démo
Une démo est disponible sur https://cdpn.io/web-dot-dev/fullpage/LEVKVdr pour vous permettre de tester 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 une nouveauté de la plate-forme Web. Il est possible que cette fonctionnalité nécessite des modifications supplémentaires à l'avenir :
- Nous pourrions ajouter un
showPicker()similaire à l'élément<select>à l'avenir, 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 d'origine croisée d'afficher des sélecteurs de navigateur lorsque leur chaîne parente les y autorise.
Commentaires
L'équipe Chrome et la communauté des normes Web souhaitent connaître 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 bien manquent-ils 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.
Vous rencontrez un problème d'implémentation ?
Avez-vous trouvé 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.
Montrer votre soutien
Prévoyez-vous d'utiliser showPicker() ? Votre soutien public 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.
Liens utiles
- Documentation MDN
- Explication WHATWG
- Spécification WHATWG
- Examen par le TAG
- Démonstration | Source de la démonstration
- Bug Chromium
- Entrée ChromeStatus.com
Remerciements
Merci à Joe Medley d'avoir relu cet article. Photo de l'image de l'agenda par Eric Rothermel sur Unsplash.