Accueil > Web en général > Input type= »date » (HTML5) : problème avec Chrome 25 et bootstrap

Input type= »date » (HTML5) : problème avec Chrome 25 et bootstrap

Je partage juste ce lien au cas où certains développeurs tombent sur ce problème

http://stackoverflow.com/questions/15070600/why-has-the-behavior-of-input-type-date-changed

Problème

Dans la version 24 de Chrome (et probablement certaines versions antérieures qui supportent le Html5), le champ <input type= »date » …/> affiche par défaut un calendrier (picker). Comme nous montre la copie d’écran suivant (sur w3cschools)

datepicker

 

Bizarrement, dans la version 25, lorsqu’on combine les CSS avec bootstrap, le picker disparaît. Par élimination, en regardant le fichier bootstrap.css (la dernière version à ce jour sur le http://twitter.github.com/bootstrap), on peut constater que le style responsable de la disparition du picker est : « display:inline-block », qui est ajouté pour tous les champs input. Le problème, c’est qu’on ne peut pas, par css, supprimer ce style, on ne peut que lui assigner une autre valeur. Et en tâtonnant sur toutes les valeurs possibles de display, cela ne change absolument rien !

Solution (trouvée sur le lien stackoverflow cité en haut)

Ajouter un hack spécial au webkit de chrome dans le fichier css du site ou de l’application :

input[type= »date »]::-webkit-calendar-picker-indicator{
display:inline-block;
margin-top:2%;
float:right;
}
input[type= »date »]::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0;
}

Ce hack signifie juste :

– faites flotter mon picker vers le haut

– faites disparaître le spinner qui gène l’affichage du picker.

Et voilà voilà !

 

 

Publicités
Catégories :Web en général
  1. mars 9, 2013 à 15:04

    You actually make it seem so easy with your presentation but I find this topic to be actually something that I think I would never understand. It seems too complex and extremely broad for me. I am looking forward for your next post, I will try to get the hang of it!

    • mars 14, 2013 à 11:08

      Thanks for the comment 🙂 feel free to ask or discuss…

  1. No trackbacks yet.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :