Une manière définitive de mettre en forme des dates pour des sites internationaux
Les formats de date varient en fonction de la région et de la langue. Il est donc toujours utile de trouver un moyen d’afficher les dates aux utilisateurs, en fonction de leur langue et de leur région..
En décembre 2012, l'ECMA a publié les spécifications de l'Internationalisation API for JavaScript. L'API d'internationalisation nous aide à afficher certaines données en fonction de la langue et des spécifications de la peau. Il peut être utilisé pour identifier les devises, les fuseaux horaires et plus.
Dans ce post, nous allons examiner formatage de date en utilisant cette API.
Connaître les paramètres régionaux de l'utilisateur
Pour afficher la date selon les paramètres régionaux préférés de l'utilisateur, nous devons d'abord connaître les paramètres régionaux. Actuellement, le moyen le plus sûr de le savoir est de demander à l'utilisateur; permettre aux utilisateurs de sélectionner les paramètres de langue et de région de leur choix dans la page Web.
Mais si ce n’est pas une option, vous pouvez interpréter le Accepter la langue demander en-tête ou lire le navigator.language(pour Chrome et Firefox) ou navigator.browserLanguage(pour IE) valeurs.
Sachez que toutes ces options ne renvoient pas la langue préférée de l'interface utilisateur du navigateur..
var language_tag = window.navigator.browserLanguage || window.navigator.language || "en"; // retourne les balises de langue comme 'en-GB'
Vérifier l'API d'internationalisation
Pour savoir si le navigateur prend en charge l’internationalisation API ou non, nous pouvons vérifier la présence de l’objet global. Intl.
if (window.hasOwnPropertyâ €‹("Intl") && typeof Intl === "objet") // L'API d'internationalisation est présente, laissez-nous l'utiliser le Intl objet
Intl est un objet global pour l’utilisation de l’API d’internationalisation. Il a trois propriétés qui sont des constructeurs pour trois objets à savoir Collateur, Format de nombre, et DateTimeFormat.
L'objet que nous allons utiliser est DateTimeFormat ce qui nous aidera à formater la date et l'heure selon différentes langues.
le DateTimeFormat objet
le DateTimeFormat constructeur prend deux arguments optionnels;
lieux- une chaîne ou un tableau de chaînes représentant les balises de langue, par exemple; “de” pour la langue allemande, “en-GB” pour l'anglais utilisé au Royaume-Uni. Si une balise de langue n'est pas mentionnée, les paramètres régionaux par défaut seront ceux du moteur d'exécution..options- un objet dont les propriétés sont utilisées pour personnaliser le formateur. Il a les propriétés suivantes:
| Propriété | La description | Valeurs possibles |
| journée | Jour du mois | “2 chiffres”, “numérique” |
| ère | La date tombe, ex: BC | “étroit”, “court”, “longue” |
| formatMatcher | L'algorithme utilisé pour la correspondance de format | “de base”, “meilleur ajustement”[Défaut] |
| heure | Représente les heures dans le temps | “2 chiffres”, “numérique” |
| heure12 | Indique le format 12 heures (vrai) ou format 24 heures (faux) | vrai, faux |
| localeMatcher | L'algorithme utilisé pour la correspondance des paramètres régionaux | “Chercher”, “meilleur ajustement”[Défaut] |
| minute | Minutes dans le temps | “2 chiffres”, “numérique” |
| mois | Mois dans un an | “2 chiffres”, “numérique”, “étroit”, “court”, “longue” |
| seconde | Secondes dans le temps | “2 chiffres”, “numérique” |
| fuseau horaire | Fuseau horaire à appliquer | “UTC”, la valeur par défaut est le fuseau horaire d'exécution |
| timeZoneName | Fuseau horaire de la date | “court”, “longue” |
| jour de la semaine | Jour de la semaine | “étroit”, “court”, “longue” |
| année | Année de la date | “2 chiffres”, “numérique” |
Exemple:
var formatter = new Intl.DateTimeFormat ('en-GB'); / * renvoie un formateur pouvant formater une date au format de date anglais britannique * / var options = jour de la semaine: 'short'; var formatter = new Intl.DateTimeFormat ('en-GB', options); / * renvoie un formateur pouvant formater une date au format de date anglais britannique * ainsi que le jour de la semaine en notation abrégée telle que "Jeu" pour jeudi * / le format une fonction
L'instance de la DateTimeFormat l'objet a un accesseur de propriété (getter) appelé format qui retourne une fonction qui formate un Rendez-vous amoureux basé sur lieux et options trouvé dans le DateTimeFormat exemple.
La fonction prend un Rendez-vous amoureux objet ou indéfini comme argument optionnel et retourne un chaîne dans le format de date demandé.
Remarque: Si l'argument est soit indéfini ou non fourni alors il retourne la valeur de Date.now () dans le format de date demandé.
Voici la syntaxe:
new Intl.DateTimeFormat (). format () // retournera la date actuelle au format de date d'exécution
Et maintenant, codons un formatage de date simple.
Changeons la langue et voyons le résultat.
Maintenant, il est temps d'examiner les options.
le toLocaleDateString méthode
Au lieu d’utiliser un formateur comme dans les exemples ci-dessus, vous pouvez également utiliser Date.prototype.toLocaleString de la même manière avec le lieux et options arguments, ils sont similaires mais il est recommandé d’utiliser le DateTimeFormat object quand il y a trop de dates dans votre application.
var mydate = new Date ('2015/04/22'); var options = jour de la semaine: "court", année: "numérique", mois: "long", jour: "numérique"; console.log (mydate.toLocaleDateString ('en-GB', options)); // renvoie "mer. 22 avril 2015" Tester si le lieux sont pris en charge
Pour vérifier la prise en charge lieux, nous pouvons utiliser la méthode pris en chargeLocalesOf de DateTimeFormat objet. Il renvoie un tableau de tous les paramètres régionaux pris en charge ou un tableau vide si aucun des paramètres régionaux n'est pris en charge..
Pour les tests, ajoutons une locale fictive “blabla” dans la liste des lieux à vérifier.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // retourne Array ["zh", "fa-pes"]
Prise en charge du navigateur
À la fin d'avril 2015, les principaux navigateurs prennent en charge l'API d'internationalisation..
Références
- ECMA International: Spécification de l'API d'internationalisation ECMAScript
- IANA: Registre des sous-étiquettes de langue
- Le coin de Norbert: L'API d'internationalisation d'ECMAScript
