- Cet article a été rédigé par Kent Tamura, ingénieur logiciel Chrome.
Comme vous l'avez peut-être déjà remarqué, Google Chrome est compatible avec un sélecteur de date depuis Chrome 20. Il suffit de définir l'attribut type de l'élément input sur date pour que l'utilisateur puisse cliquer sur le bouton fléché et Chrome affichera un widget d'agenda intéressant.
Nous avons reçu de nombreux commentaires de la part des développeurs. C'est pourquoi nous souhaitons clarifier certaines informations sur la façon d'utiliser au mieux le sélecteur de date dans cet article.
En quoi les paramètres régionaux affectent-ils le format de date de la valeur d'entrée ?
Les utilisateurs peuvent saisir une valeur de date dans le champ de texte d'un input[type=date], le format de date étant affiché dans la zone en texte gris. Ce format est obtenu à partir des paramètres du système d'exploitation.
Les auteurs Web ne peuvent pas modifier le format de date, car il n'existe actuellement aucune norme pour le spécifier.
Comment la valeur d'entrée est-elle représentée lors de l'envoi à un serveur ?
La valeur de date interprétée à partir de input[type=date] dans la requête HTTP, telle que GET / POST, sera mise en forme sous la forme yyyy-mm-dd.
Quel type de format la valeur d'entrée renvoie-t-elle ?
input.value est toujours renvoyé sous la forme yyyy-mm-dd, quel que soit le format de présentation.
Quel type de format accepte la valeur d'entrée ?
Lorsque vous définissez input.value de manière programmatique, la valeur n'accepte que le style yyyy-mm-dd, quel que soit le format de présentation de la valeur initiale et de la valeur injectée en JavaScript.
Comment modifier l'apparence du sélecteur de date ?
Pour le moment, vous ne pouvez pas styliser l'apparence du sélecteur de date. Dans WebKit, nous avons précédemment fourni des moyens de styliser les commandes de formulaire avec la propriété CSS -webkit-appearance ou le sélecteur de pseudo-classe ::-webkit-foo. Cependant, le calendrier ne fournit pas de telles options dans WebKit, car il est distinct du document, comme un menu contextuel pour <select>, et il n'existe actuellement aucune norme concernant la manière de contrôler le style de ses sous-éléments.
Comment éviter les conflits entre le Datepicker jQuery et le sélecteur de date natif ?
Si vous avez essayé jQuery Datepicker sur input[type=date] dans Google Chrome, vous avez peut-être remarqué que les calendriers de l'UI jQuery et de la fenêtre pop-up de calendrier natif se chevauchent.
Si vous souhaitez appliquer le Datepicker jQuery sur toutes les plates-formes, utilisez input[type=text] au lieu de input[type=date]. Google Chrome, mais aussi iOS Safari, le navigateur BlackBerry et Opera disposent de leur propre UI pour input[type=date]. Il n'existe actuellement aucun moyen d'obtenir une UI unifiée sur toutes les plates-formes à l'aide de input[type=date].
Si vous souhaitez appliquer jQuery Datepicker uniquement sur les plates-formes qui ne prennent pas en charge input[type=date], vous pouvez utiliser Modernizr ou le code suivant :
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();