hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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:
PropriétéLa descriptionValeurs possibles
journéeJour du mois"2 chiffres", "numérique"
èreEra la date tombe dans, Ex: BC"Étroit", "court", "long"
formatMatcherL'algorithme utilisé pour l'appariement de format"Basic", "best fit" [ Par défaut ]
heureReprésente les heures dans le temps"2 chiffres", "numérique"
heure12Indique le format 12 heures ( true ) ou le format 24 heures ( false )true, false
localeMatcherL'algorithme utilisé pour la correspondance des paramètres régionaux"Recherche", "meilleur ajustement" [ Valeur par défaut ]
minuteMinutes dans le temps"2 chiffres", "numérique"
moisMois dans une année"2 chiffres", "numérique", "étroit", "court", "long"
secondeSecondes dans le temps"2 chiffres", "numérique"
fuseau horaireFuseau horaire à appliquer"UTC", par défaut est le fuseau horaire d'exécution
timeZoneNameFuseau horaire de la date"court long"
jour de la semaineJour dans la semaine"Étroit", "court", "long"
anAnnée de la date"2 chiffres", "numérique"

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.

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

Comment sécuriser votre ordinateur contre les voleurs d'identité

Comment sécuriser votre ordinateur contre les voleurs d'identité

Le vol d'identité est un cauchemar que tout le monde pourrait expérimenter. Cela peut affecter les particuliers, les entreprises et même les agences gouvernementales qui gèrent leurs services en ligne. Les voleurs d'identité utilisent l'identité d'autrui pour commettre des crimes tels que le vol, la diffamation ou pour leur propre intérêt personnel ou financier.Comme l

(Conseils techniques et de conception)

30 magnifiques GIF de calligraphie que vous ne pouvez pas arrêter de regarder

30 magnifiques GIF de calligraphie que vous ne pouvez pas arrêter de regarder

Il est très rare de trouver une belle écriture de nos jours. Il est encore plus rare de trouver quelqu'un de très versé dans l'art de la calligraphie. Fini les jours où les cahiers ressemblaient moins à un tas de pages écrites en code Morse et plus comme des bonbons pour les yeux. C'est compréhensible, d'une certaine manière; Avec l'avancée de la technologie, la dactylographie permet de dactylographier des pensées et des notes importantes plus rapidement que si l'on devait l'écrire . L'écri

(Conseils techniques et de conception)