Une manière définitive de formater les dates pour les 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 pour les utilisateurs, en fonction de leur langue et de leur région.

En décembre 2012, ECMA a publié les spécifications de l'API d'internationalisation pour JavaScript. L'API d'internationalisation nous aide à afficher certaines données en fonction de la langue et de la spécification. Il peut être utilisé pour identifier les devises, les fuseaux horaires et plus encore.

Dans ce post, nous allons examiner la mise en forme de la date à l' aide de cette API.

Connaître les paramètres régionaux de l'utilisateur

Pour afficher la date en fonction des paramètres régionaux préférés de l'utilisateur, nous devons d'abord connaître les paramètres régionaux préférés. Actuellement, le moyen infaillible de le savoir est de demander à l'utilisateur; permet aux utilisateurs de sélectionner leurs paramètres de langue et de région préférés dans la page Web.

Mais, si ce n'est pas une option, vous pouvez interpréter l'en Accept-Language tête de requête Accept-Language ou lire les valeurs navigator.language (pour Chrome et Firefox) ou navigator.browserLanguage (pour IE).

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"; // renvoie les balises de langue comme 'en-GB' 

Vérifier l'API d'internationalisation

Pour savoir si le navigateur supporte ou non l'API d'internationalisation, on peut vérifier la présence de l'objet global Intl .

 if (window.hasOwnProperty) ("Intl") && typeof Intl === "objet") {// API Internationalization est présent, utilisons-le} 

L'objet Intl

Intl est un objet global pour l'utilisation de l'API Internationalization. Il a trois propriétés qui sont des constructeurs pour trois objets à savoir Collator, NumberFormat et DateTimeFormat .

L'objet que nous allons utiliser est DateTimeFormat qui nous aidera à mettre en forme l'heure de la date selon différentes langues.

L'objet DateTimeFormat

Le constructeur DateTimeFormat prend deux arguments facultatifs;

• locales - une chaîne ou un tableau de chaînes représentant les étiquettes de langue, par exemple; "De" pour l'allemand, "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 de l'exécution.
• options - un objet dont les propriétés sont utilisées pour personnaliser le formateur. Il a les propriétés suivantes:

Exemple:

 var formatter = new Intl.DateTimeFormat ('en-GB'); / * renvoie un formateur qui peut 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 qui peut formater une date au format de date anglais britannique * avec le jour de la semaine en notation courte comme 'Jeu' pour jeudi * / 

La fonction de format

L'instance de l'objet DateTimeFormat possède un accesseur de propriété (getter) appelé format qui renvoie une fonction qui formate une Date fonction des locales et des options trouvés dans l'occurrence DateTimeFormat .

La fonction prend un objet Date ou undefined comme argument facultatif et renvoie une string dans le format de date demandé.

Remarque: Si l'argument est undefined ou non fourni, il renvoie la valeur de Date.now() au format de date demandé.

Voici la syntaxe:

 new Intl.DateTimeFormat (). format () // renvoie la date actuelle au format de date d'exécution 

Et maintenant, laissez-nous coder un formatage de date simple.

Laissez-nous changer la langue et voir la sortie.

Maintenant, il est temps de regarder dans les options.

La méthode toLocaleDateString

Au lieu d'utiliser un formateur comme indiqué dans les exemples ci-dessus, vous pouvez également utiliser Date.prototype.toLocaleString de la même manière avec les locales et options, ils sont similaires mais il est recommandé d'utiliser l'objet DateTimeFormat lorsque vous manipulez 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" 

Teste si les locales sont supportées

Pour vérifier les locales pris en charge, nous pouvons utiliser la méthode supportedLocalesOf de l'objet DateTimeFormat . 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 tester, ajoutons un paramètre "blah" dans la liste des paramètres régionaux à vérifier.

 console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // renvoie Array ["zh", "fa-pes"] 

Support du navigateur

Fin avril 2015, les principaux navigateurs prennent en charge l'API Internationalization.

• ECMA International: Spécification de l'API ECMAScript Internationalization
• IANA : Registre des sous-étiquettes de langues
• Norbert's Corner: L'API ECMAScript Internationalization

Designers: 10 Ebooks courts pour tuer votre temps libre

Habituellement, nous passons tellement de temps à vérifier les mises à jour de nos réseaux sociaux et à jouer à nos jeux, alors quand il s'agit de parcourir de longues distances, il est peut-être temps de changer. Plutôt que de se rabattre sur les livres imprimés, pourquoi ne pas saisir des livres électroniques pour pouvoir passer d'un titre à l'autre sans porter tout le poids supplémentaire ?Tout ce don

(Conseils techniques et de conception)

Comment faire face au manque de soutien pour votre carrière Freelancing

Si les chiffres de cet article de Forbes sont une indication, de plus en plus de gens adoptent la pige en tant que moyen de subsistance . Bien que l'article se réfère spécifiquement aux pigistes américains, il est raisonnable d'extrapoler que la tendance est la même dans le monde entier, puisque l'Internet a à peu près uniformisé les règles du jeu pour ces travailleurs.Cependan

(Conseils techniques et de conception)