Sélecteur de dates HTML5

J'ai récemment signalé que j'avais décidé d'utiliser Opera dans mes démonstrations HTML5 pour les journées de formation RMOUG 2011. Comme je l'ai indiqué dans cet article, une grande raison pour ajouter le navigateur Web Opera à l'ensemble présenté est qu'il prend en charge certaines des fonctionnalités HTML5. mieux que les autres navigateurs. Cet article illustrera l'un de ces cas: les sélecteurs de dates HTML5.

L'une des petites mais belles choses à propos de l'utilisation de Flex ou d'une bibliothèque JavaScript telle que JQuery est la disponibilité de mécanismes intégrés pour des contrôles d'entrée conviviaux. En particulier, un bon sélecteur de dates est toujours apprécié.

HTML5 est actuellement prévu pour offrir un widget de sélection de date standard qui peut être utilisé avec des balises HTML. Dans cet article, je regarde l'état des sélecteurs de dates HTML5 dans les versions récentes non bêta de cinq navigateurs Web populaires (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 et Opera 11).

HTML prend en charge divers champs de saisie via la balise d'entrée. Les différents types de champs de saisie sont spécifiés via l' attribut de l' inputélément type. HTML5 augmente considérablement le nombre de types disponibles qui peuvent être spécifiés. Plusieurs des nouvelles valeurs pour l' typeattribut comprennent ceux liés à la date / heure: date, datetime, datetime-local, month, weeket time. Chacun de ces éléments est illustré dans l'extrait de code HTML suivant.

   HTML5 Date Pickers Demonstrated    
    
Input Type Input Field
date
datetime
datetime-local
month
week
time

Des cinq navigateurs Web que j'ai énumérés précédemment, Opera fournit de loin l'implémentation la plus sophistiquée de la date / heure typede la inputbalise. En commençant par le positif, les premiers instantanés d'écran montrent comment ce simple HTML est rendu dans Opera 11.

Opera 11 Rendu initial de la page

Attribut "date" de la balise d'entrée Opera 11

Attribut "datetime" de la balise d'entrée Opera 11

Attribut "datetime-local" de la balise d'entrée Opera 11

Attribut "mois" de la balise d'entrée Opera 11

La mise en œuvre d'Opera met en évidence tout le mois qui sera sélectionné.

Attribut "semaine" de la balise d'entrée Opera 11

Opera met en évidence la semaine qui sera sélectionnée.

Attribut "time" de la balise d'entrée Opera 11

Opera 11 - Tous les champs de saisie sélectionnés

L'implémentation par Opera des champs de saisie de date / heure est impressionnante. Je souhaite que la même chose puisse être dite pour les autres navigateurs non bêta. Malheureusement, les autres navigateurs ne prennent pas en charge ces types de champs à proximité de cet élégant. En fait, je ne pense pas que cela vaille la peine d'inclure tous leurs instantanés d'écran ici. Au lieu de cela, je montre simplement un instantané d'écran de chacun après avoir rempli tous les champs. Dans la plupart des cas, les navigateurs traitaient simplement ces champs comme de simples champs de type "texte".

Sélecteurs de dates Firefox 3.6: ce ne sont que du texte

Sélecteurs de dates Internet Explorer 8: ce ne sont que du texte

Sélecteurs de dates Safari 5: il ne s'agit que de texte avec mise en évidence

Sélecteurs de dates Chrome 8: pas tout à fait là

Bien que pas aussi élégant que le traitement par Opera des champs de date / heure, le navigateur Chrome traite ces champs comme plus que du texte et limite ce qui peut être saisi dans les champs. Malheureusement, il n'y a pas de fenêtres contextuelles de sélection de date / heure comme Opera. Néanmoins, la mise en évidence du champ ciblé est agréable et le fait que les données sélectionnées soient un peu date / heure comme dans le format aide.

Conclusion

J'attends avec impatience le jour où les principaux navigateurs prendront systématiquement en charge les contrôles de date / heure normalisés afin que de simples balises HTML "d'entrée" avec les attributs appropriés rendront des sélecteurs de date / heure élégants et stylistiques sur n'importe quel navigateur. Opera 11 mène actuellement le peloton et fournit la meilleure illustration de ce qui pourrait être.

Cette histoire, "HTML5 Date Picker" a été initialement publiée par JavaWorld.