hideout-lastation.com
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 description | Valeurs possibles |
| journée | Jour du mois | "2 chiffres", "numérique" |
| ère | Era la date tombe dans, Ex: BC | "Étroit", "court", "long" |
| formatMatcher | L'algorithme utilisé pour l'appariement de format | "Basic", "best fit" [ Par défaut ] |
| heure | Représente les heures dans le temps | "2 chiffres", "numérique" |
| heure12 | Indique le format 12 heures ( true ) ou le format 24 heures ( false ) | true, false |
| localeMatcher | L'algorithme utilisé pour la correspondance des paramètres régionaux | "Recherche", "meilleur ajustement" [ Valeur par défaut ] |
| minute | Minutes dans le temps | "2 chiffres", "numérique" |
| mois | Mois dans une année | "2 chiffres", "numérique", "étroit", "court", "long" |
| seconde | Secondes dans le temps | "2 chiffres", "numérique" |
| fuseau horaire | Fuseau horaire à appliquer | "UTC", par défaut est le fuseau horaire d'exécution |
| timeZoneName | Fuseau horaire de la date | "court long" |
| jour de la semaine | Jour dans la semaine | "Étroit", "court", "long" |
| an | Anné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
10 Killer Adobe Photoshop Conseils pour les concepteurs
Croyez-le ou non, si vous utilisez Photoshop pour concevoir un site Web, vous êtes sur la bonne voie pour devenir un concepteur de sites Web réussi. C'est tout simplement parce que Photoshop est l'un des outils les plus avancés dans l'industrie du design qui peut rendre votre imagination créative réalité avec sa pléthore d'outils professionnels qui augmentent votre productivité en même temps.Mais sav
5 outils d'enregistrement d'écran gratuit pour macOS
Si vous passez beaucoup de temps à réaliser des tutoriels, cela peut devenir un peu frustrant lorsque vous avez de la difficulté à faire passer votre message à votre auditoire. Après tout, certaines choses ne peuvent tout simplement pas être expliquées à travers les images et le texte . Parfois, ce dont vous avez besoin est d'enregistrer la séquence d'actions dans une vidéo, afin que chacun puisse à la fois voir et écouter les étapes de votre tutoriel pour mieux comprendre le processus.Aujourd'h
