- Cet article a été écrit par Kent Tamura, ingénieur logiciel pour Chrome.
Comme vous l'avez peut-être déjà remarqué, Google Chrome propose un sélecteur de date depuis Chrome 20. Il suffit à l'utilisateur de cliquer sur la flèche en définissant l'attribut type de l'élément input sur date pour qu'un widget d'agenda s'affiche dans Chrome.
Comme nous avons reçu de nombreux commentaires de la part des développeurs, nous souhaitons clarifier quelques points sur la façon d'exploiter au mieux le sélecteur de date dans cet article.
Comment 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'une input[type=date], avec le format de date affiché en gris. Ce format est obtenu à partir des paramètres du système d'exploitation.
Les auteurs Web n'ont aucun moyen de modifier le format de la date, car il n'existe actuellement aucune norme pour en 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 (par exemple, GET ou POST) sera au format yyyy-mm-dd.
Quel type de format la valeur d'entrée renvoie-t-elle ?
input.value renvoie toujours la valeur yyyy-mm-dd, quel que soit le format de présentation.
Quel type de format la valeur d'entrée accepte-t-elle ?
Lorsque vous définissez input.value par programmation, 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 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 déjà 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. Toutefois, la fenêtre pop-up d'agenda ne propose pas cette possibilité dans WebKit, car elle est distincte 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 sélecteur de date 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 agendas de l'interface utilisateur jQuery et de la fenêtre pop-up native des agendas se chevaucher.
Si vous souhaitez appliquer le sélecteur de date jQuery à toutes les plates-formes, utilisez input[type=text] au lieu de input[type=date]. Google Chrome, iOS Safari, le navigateur BlackBerry et Opera disposent de leur propre interface utilisateur pour input[type=date]. Il n'existe actuellement aucun moyen d'obtenir une interface utilisateur unifiée sur toutes les plates-formes utilisant input[type=date].
Si vous souhaitez appliquer le sélecteur de date jQuery uniquement sur les plates-formes non compatibles avec 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();