web-dev-qa-db-fra.com

Existe-t-il un moyen de localiser le type d'entrée = "date" en HTML5

Je sais qu'au moment de la rédaction de cet article, seul Opera prend en charge une interface utilisateur de navigateur pour

<input type="date" name="mydate">

et peut-être que mes tentatives pour localiser ce champ ont été frustrées parce que des subtilités comme la localisation n'ont pas encore été incluses dans leur implémentation, mais je ne vois même pas de mention dans la spécification HTML5. Existe-t-il un moyen de spécifier la localisation? Dois-je faire lang = "fr" sur un élément parent?

Quelques notes sur la mise en place du site en question:

  • La localisation (langue) est explicitement choisie par l'utilisateur car il gère les données dans plusieurs langues et il n'est pas raisonnable de s'attendre à ce que le navigateur de l'utilisateur chrome soit dans la langue affichée ou que le navigateur soit fournir les en-têtes de demande de langue souhaités.
  • Je veux être sûr que si la page est rendue en français, le sélecteur de date fourni par le navigateur chrome affiche les options qui ont du sens pour la langue française.
  • Le plan est de revenir à jQueryUI pour les navigateurs qui ne supportent pas type = "date", j'utiliserai le mécanisme de détection fourni dans Plongez dans HTML 5
formshtmldatepicker
47
lambacck

D'après ce que je sais, la pensée derrière ce que nous faisons dans Opera (divulgation complète: je travaille pour eux) est que le sélecteur de date est presque une extension du chrome, un contrôle natif du navigateur. En tant que tel, il sera localisé en fonction de la langue du navigateur, plutôt que de la langue de la page consultée.

17
Patrick H. Lauke

Je suis d'accord avec lambacck. Actuellement, j'écris du code Javascript pour rendre les nouvelles fonctionnalités du formulaire disponibles sur plusieurs navigateurs, en utilisant jQuery UI pour cela.

Je travaille au Luxembourg qui est un bon endroit pour illustrer le problème de localisation plus en détail.

La plupart des sites Web que nous écrivons sont multilingues de | fr | en. D'après nos statistiques, nous pouvons dire que les gens utilisent le commutateur de langue sur le site pour afficher leur langue préférée, mais ce choix correspond rarement aux paramètres régionaux du navigateur préférés.

Si les paramètres régionaux du calendrier, etc. sont effectués par le système d'exploitation, cela nous ramène à la situation malheureuse <type d'entrée = fichier> où l'étiquette indique Télécharger un fichier et le bouton dit Parcourir. Vous ne pouvez rien faire à propos de ce mélange de langues et j'ai toujours trouvé que c'était une gêne majeure.

Conclusion, je dois écraser le calendrier par défaut avec celui de jQuery pour être sûr qu'il fait ce que je veux.

À mon avis, une API configurable ou au moins un moyen de manipuler les paramètres régionaux au niveau HTML serait formidable. Étant donné que les nouveaux types de champs ne sont pas encore largement adoptés par les autres fabricants de navigateurs, j'imagine que ce problème pourrait toujours être pris en compte.

Merci d'avoir lu ceci.

13
Dieter Raber

Pour les mobiles, la meilleure solution que nous avons trouvée est d'utiliser une entrée de texte pour la saisie de la date, avec une icône de calendrier à côté qui a une entrée de date invisible sur l'icône.

Avantages:

  • fonctionne sur tous les navigateurs et appareils
  • peut utiliser le bouton suivant dans la date sur iOS (si plusieurs champs)
  • l'utilisateur peut taper la date (très utile)
  • évite les bogues de l'interface utilisateur iOS (1. modification des données existantes avec une date vierge, prochaine date, la valeur de la date est définie à aujourd'hui - arrrgh, 2. affichage du clavier, prochaine date, des fenêtres contextuelles et le clavier disparaît - aïe)
  • utilisez une bibliothèque de dates pour afficher la date en entrée comme ensemble de localisation pour le compte de votre utilisateur (pas le navigateur), et pouvez utiliser une bibliothèque de dates intelligente (tapez "demain", etc.).
  • cliquez sur l'icône du calendrier pour voir la date comme localisation du navigateur
  • repli gracieux même si input type=date non pris en charge par l'appareil/le navigateur (par exemple, certains Android ne prennent pas en charge la date ou présentent de graves bogues).
  • pour le bureau (détecté par aucune assistance tactile), nous affichons notre propre liste déroulante de date personnalisée.

HTML est quelque chose comme:

<input type=text>
<span style=position:relative>
  <input type=date class=date-input tabIndex=-1>
  <div class=date-input-icon>&#x25BC;</div>
</span>

CSS:

.date-input {
  position: relative;
  z-index: 1;
  webkit-appearance: none;
  display: inline-block;
  opacity: 0;
  width: 1em;
}

.date-input-icon {
  position: absolute;
  right: 0;
  width: 1em;
}
4
robocat