Comment changer la langue de moment.js?


198

J'essaye de changer la langue de la date qui est réglée par moment.js. La langue par défaut est l'anglais, mais je souhaite définir la langue allemande. Voici ce que j'ai essayé:

var now = moment().format("LLL").lang("de");

C'est donner NaN.

var now = moment("de").format("LLL");

Cela ne réagit même pas.

var now = moment().format("LLL", "de");

Pas de changement: cela produit toujours un résultat en anglais.

Comment est-ce possible?


Réponses:


306

Vous avez besoin de moment.lang ( ATTENTION : lang()est obsolète depuis moment 2.8.0, utilisez à la locale()place):

moment.lang("de").format('LLL');

http://momentjs.com/docs/#/i18n/


À partir de la v2.8.1, moment.locale('de')définit la localisation, mais ne renvoie pas de fichier moment. Quelques exemples:

var march = moment('2017-03')
console.log(march.format('MMMM')) // 'March'

moment.locale('de') // returns the new locale, in this case 'de'
console.log(march.format('MMMM')) // 'March' still, since the instance was before the locale was set

var deMarch = moment('2017-03')
console.log(deMarch.format('MMMM')) // 'März'

// You can, however, change just the locale of a specific moment
march.locale('es')
console.log(march.format('MMMM')) // 'Marzo'

En résumé, l'appel localeau global momentdéfinit les paramètres régionaux de toutes les momentinstances futures , mais ne renvoie pas d'instance de moment. L'appel localesur une instance, la définit pour cette instance ET renvoie cette instance.

Aussi, comme Shiv l'a dit dans les commentaires, assurez-vous d'utiliser "moment-with-locales.min.js" et non "moment.min.js", sinon cela ne fonctionnera pas.


1
Dans la documentation, vous pouvez créer des instances de moment spécifiques à une langue en faisant cela. Si vous formatez d'abord, la langue ne sera pas traitée. Alternativement, vous pouvez faire quelque chose comme var deMoment = moment(); deMoment.lang('de')et réutiliser deMomentau lieu de moment tout au long de votre script.
kalley

34
Si vous utilisez "moment.min.js", cela ne fonctionnera pas; vous avez besoin de "moment-with-locales.min.js"
Shiv

2
mise à jour:Deprecation warning: moment().lang() is deprecated. Instead, use moment().localeData() to get the language configuration. Use moment().locale() to change languages. Arguments: fr
Abdelouahab

8
vous devez importer la langue voulue sinon cela ne fonctionnera pas: import moment from 'moment'; import localization from 'moment/locale/de' moment().locale("de", localization).format('LLL')
Blue Bot

2
importer un moment depuis 'moment / min / moment-avec-locales';
leojnxs

169

J'ai dû importer aussi la langue:

import moment from 'moment'
import 'moment/locale/es'  // without this line it didn't work
moment.locale('es')

Ensuite, utilisez le moment comme vous le feriez normalement

alert(moment(date).fromNow())

15
Votre réponse est plus utile que les autres parce que vous en avez parléimport 'moment/locale/es'
Artem Solovev

4
Oui, c'est la bonne réponse ... merci, je m'arrachais les cheveux en me demandant pourquoi cela ne fonctionnait pas. Mais c'est une vraie douleur d'avoir à importer pour tout type de langage qui pourrait être utilisé. Il doit y avoir une meilleure façon.
Maniaque

1
Merci d'expliquer l'importation de paramètres régionaux spécifiques.
Fernando León

selon la documentation, si quelqu'un veut que tous les paramètres régionaux soient inclus, il / elle peut utiliser ceci require("moment/min/locales.min");ou en utilisant importimport 'moment/min/locales.min'
kamran

Merci, exactement ce dont j'ai besoin
Davide P.

54

Méthode la plus rapide: installer avec Bower

Je viens d'installer moment avec bower et lié en de.jstant que ressource javascript dans mon projet html.

bower install moment --save

Vous pouvez également télécharger manuellement les fichiers moment.jset de.js.

Liez 'de.js' dans votre projet

Lier le de.jsdans mon fichier de projet principal a automatiquement changé les paramètres régionaux pour tous les accès à la classe moment et ses méthodes.

Il ne sera plus nécessaire de faire un moment.locale("de").ou moment.lang("de"). dans le code source.

Liez simplement votre langue souhaitée comme ceci:

<script src="/bower_components/moment/moment.js"></script>
<script src="/bower_components/moment/locale/de.js"></script>

Ou vous pouvez lier les bibliothèques sans le bower_componentschemin, si vous avez téléchargé moment.js dans le style des années 1990 via un clic droit, ce qui fonctionne toujours bien dans la plupart des scénarios.


2
Cela devrait être la bonne réponse. Il suffit de lier le local souhaité avec <script src="/bower_components/moment/locale/de.js"></script>. Cela fonctionne pour moi en ce moment.
mles

8
"Il ne sera plus nécessaire de faire un moment.locale (" de "). Ou moment.lang (" de "). Dans le code source.". Je pense que cela est toujours utile pour les applications dynamiques qui changent les paramètres régionaux. Comme vous pouvez théoriquement changer les paramètres régionaux dans mon application via une liste déroulante lang / country dans mon application angulaire, puis le moment devrait changer de format dynamiquement, ce que je ferais je pense avec moment.locale ($ lang)
armyofda12mnkeys

Bien sûr, mais vous devez toujours charger le fichier javascript dans votre index.html dans mes tests. C'est toujours un problème en mai 2017, peut-être que le moment devrait l'inclure dans leurs documents.
Steve K

37

Avec momentjs 2.8+, procédez comme suit:

moment.locale("de").format('LLL');

http://momentjs.com/docs/#/i18n/


Cela devrait fonctionner; pouvez-vous donner un exemple où cela ne fonctionne pas, comment utilisez-vous moment (l'avez-vous installé via npm, etc.)?
omninonsense

4
Avec des moments récents (j'ai testé en 2.18.1) utilisez ceci: moment.locale ("de"); var m = moment (). format ("LLL")
apadana

1
apadana a raison: vous définissez les paramètres régionaux avec moment.locale('de'), et vous créez un nouvel objet représentant la date de now by moment()(notez la parenthèse) et ensuite format('LLL'). La parenthèse est importante. Testé en 2.20. N'oubliez pas non plus d'utiliser moment-with-locale.jset si nécessaire, changez le nom en moment.js. Django refuse simplement de charger moment-with-locale.jsdans mon cas.
WesternGun

1
si celui-ci ne fonctionne pas, essayez celui-ci: moment().locale('de').format('LLL');
Anthony Kal

Celui-ci est cohérent, n'oubliez pas d'importer la locale que vous souhaitez utiliser (cfr. Réponse d'Agu Dondo).
Jeroen Crevits

13

Vous devrez ajouter moment.lang(navigator.language)votre script.

Et vous devez également ajouter les paramètres régionaux du pays dans lesquels vous souhaitez afficher: par exemple pour GB ou FR, vous devez ajouter ce format de paramètres régionaux dans la bibliothèque moment.js. Un exemple d'un tel format est disponible dans la documentation momentjs. Si vous n'ajoutez pas ce format dans moment.js, il sélectionnera TOUJOURS les paramètres régionaux américains car c'est le seul que je vois actuellement.


que se passe-t-il si leur navigateur est en «en» et qu'ils lisent en «es», alors il n'affichera que l'heure en «en»
Peter the Russian

12

fin 2017/2018: les autres réponses ont trop de vieux code à éditer, alors voici ma réponse propre alternative:

avec exiger

let moment = require('moment');
require('moment/locale/fr.js');
// or if you want to include all locales:
require("moment/min/locales.min");

avec importations

import moment from 'moment';
import 'moment/locale/fr';
// or if you want to include all locales:
require("moment/min/locales.min");

Utilisation:

moment.locale('fr');
moment().format('D MMM YY');  // Correct, set default global format 
// moment.locale('fr').format('D MMM YY') //Wrong old versions for global default format

avec fuseau horaire

*exiger:

require('moment-range');
require('moment-timezone');

*importer:

import 'moment-range';
import 'moment-timezone';

utiliser les zones:

const newYork    = moment.tz("2014-06-01 12:00", "America/New_York");
const losAngeles = newYork.clone().tz("America/Los_Angeles");
const london     = newYork.clone().tz("Europe/London");

fonction pour formater la date

const ISOtoDate = function (dateString, format='') {

 // if date is not string use conversion:
 // value.toLocaleDateString() +' '+ value.toLocaleTimeString();

  if ( !dateString ) {
    return '';
  }

  if (format ) {
    return moment(dateString).format(format);
  } else  {
    return moment(dateString);  // It will use default global format
  }  
};

La seule chose qui a fonctionné pour moi a été de changer l'importation de moment en:import moment from 'moment/min/moment-with-locales';
leojnxs

@leojnxs oui, si vous voulez inclure tous les paramètres régionaux, mais il est possible de travailler uniquement avec un ou plusieurs paramètres régionaux spécifiques effectuant une importation pour chaque langue
stackdave

6

POUR LES UTILISATEURS METEOR:

au moment où les locales ne sont pas installées par défaut dans meteor, vous n'obtenez que la locale 'en' avec l'installation par défaut.

Donc, vous utilisez le code comme indiqué correctement dans d'autres réponses:

moment.locale('it').format('LLL');

mais il restera en anglais jusqu'à ce que vous installiez les paramètres régionaux dont vous avez besoin.

Il existe un moyen agréable et propre d'ajouter des paramètres régionaux individuels pour le moment dans meteor (fourni par rzymek ).

Installez le package moment de la manière habituelle des météores avec:

meteor add rzymek:moment

Ensuite, ajoutez simplement les paramètres régionaux dont vous avez besoin, par exemple pour l'italien:

meteor add rzymek:moment-locale-it

Ou si vous voulez vraiment ajouter tous les paramètres régionaux disponibles (ajoute environ 30k à votre page):

meteor add rzymek:moment-locales

@AntonAL Heureusement que vous m'avez envoyé votre commentaire, je viens de remarquer que la question n'était pas vraiment pour météore. Cependant, ma réponse est assez utile, je pense. J'ai modifié ma réponse pour refléter cela.
mwarren

Merci! Ajouté rzymek:moment-locale-deet cela a fonctionné :)
nooitaf

4

Avec le moment 2.18.1 et au-delà:

  moment.locale("de");
  var m = moment().format("LLL")

2
Doit inclure les fichiers de paramètres régionaux, sinon cela ne fonctionnera pas.
zeleven

2
Cela a déjà été mentionné comme ne fonctionnant que si le module de paramètres régionaux associé au moment spécifique a également été importé.
Maniaque

@Maniaque Je n'ai rien installé de spécial, juste l'installation de npm - économisez un moment et cela fonctionne bien
fedeteka

3
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MomentJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script type="text/javascript" src="moment.js"></script>
    <script type="text/javascript" src="locale/ne.js"></script>
</head>
<body>
    <script>
        jQuery(document).ready(function($) {
            moment.locale('en'); // default the locale to English
            var localLocale = moment();

            moment.locale('ne'); // change the global locale to Nepalese
            var ne1 = localLocale.format('LLLL');
            var ne2 = moment().format('LLLL');

            $('.ne1').text(ne1);
            $('.ne2').text(ne2);
        });
    </script>
    <p class="ne1"></p>
    <p class="ne2"></p>
</body>
</html>

Démo


3

Comme j'utilisais webpack avec gulp et ses amis ( ce générateur a tout configuré pour moi), j'ai dû modifier le fichier bower.json. J'ai dû remplacer le package d'importation par défaut pour le moment et sélectionner le fichier fourni avec toutes les langues:

"overrides": {
  "moment": {
    "main": [
        "min/moment-with-locales.min.js"
    ]
  }
}

Ceci est mon fichier bower.json complet:

{
  "name": "html5",
  "version": "0.0.0",
  "dependencies": {
    "angular-animate": "~1.4.2",
    "angular-cookies": "~1.4.2",
    "angular-touch": "~1.4.2",
    "angular-sanitize": "~1.4.2",
    "angular-messages": "~1.4.2",
    "angular-ui-router": "~0.2.15",
    "bootstrap-sass": "~3.3.5",
    "angular-bootstrap": "~0.13.4",
    "malarkey": "yuanqing/malarkey#~1.3.1",
    "angular-toastr": "~1.5.0",
    "moment": "~2.10.6",
    "animate.css": "~3.4.0",
    "angular": "~1.4.2",
    "lodash": "^4.13.1",
    "angular-moment": "^0.10.3",
    "angularLocalStorage": "ngStorage#^0.3.2",
    "ngstorage": "^0.3.10"
  },
  "devDependencies": {
    "angular-mocks": "~1.4.2"
  },
  "overrides": {
    "bootstrap-sass": {
      "main": [
        "assets/stylesheets/_bootstrap.scss",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    },
    "moment": {
      "main": [
          "min/moment-with-locales.min.js"
      ]
    }
  },
  "resolutions": {
    "angular": "~1.4.2"
  }
}

Après cela, vous devez encore déclarer / définir la locale du moment avant de sortir une date, non?
NikZ

Bien sûr :) Cela garantit simplement que vous avez les phrases traduites disponibles afin que vous puissiez passer à une autre langue (à la volée)
GameScripting

3

J'utilise angular2-moment, mais l'utilisation doit être similaire.

import { MomentModule } from "angular2-moment";
import moment = require("moment");

export class AppModule {

  constructor() {
    moment.locale('ru');
  }
}

3

Changer la langue du moment js selon la version

Version: 2.8+

moment.locale ('salut');

Version: 2.5.1

moment.lang ('salut');


3

fonctionne bien comme ça: return moment(status.created_at).locale('es').fromNow();


2
Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire sur la manière et / ou la raison pour laquelle il résout le problème améliorerait la valeur à long terme de la réponse.
Badacadabra le

3

Je ne sais pas ce qui a changé mais l'importation du fichier de langue comme celle-ci a fonctionné pour moi

import 'moment/src/locale/fr';
moment.locale('fr)

Notez le src dans l'instruction d'importation


2

pour momentjs 2.12+ , procédez comme suit:

moment.updateLocale('de');

Notez également que vous devez utiliser moment.updateLocale(localeName, config)pour modifier un paramètre régional existant. moment.defineLocale(localeName, config)ne doit être utilisé que pour créer un nouveau paramètre régional.


2

Pour moi, il y a quelques changements à faire (ver. 2.20)

  1. Vous définissez les paramètres régionaux avec moment.locale('de'), et vous créez un nouvel objet représentant la date de now by moment()(notez la parenthèse), puis format('LLL')il. La parenthèse est importante.

Donc ça signifie:

moment.locale('de');
var now = moment();
now.format('LLL');
  1. N'oubliez pas non plus d'utiliser moment-with-locale.js. Le fichier contient toutes les informations locales et a une taille de fichier plus grande. Télécharger le localedossier ne suffit pas. Si nécessaire, modifiez le nom en moment.js. Django refuse simplement de charger moment-with-locale.jsdans mon cas.

EDIT: Il s'est avéré que renommer le fichier n'est pas nécessaire. J'ai juste oublié de l'invoquer dans la page donc Django ne pense pas que le chargement soit nécessaire, donc ma faute.


2

Celui-ci fonctionne simplement en détectant automatiquement l'emplacement actuel de l'utilisateur.

import moment from "moment/min/moment-with-locales";

// Then use it as you always do. 
moment(yourDate).format("MMMM Do YYYY, h:mm a")

1

Oups glisser du stylo. Je résoudrais ceci: var moment = function(x) { return moment(x).locale('de'); }les autres moyens ne semblent pas vraiment coller / tenir dans des conditions (pour moi).


0

Pour ceux qui travaillent dans des environnements asynchrones, momentse comporte de manière inattendue lors du chargement de paramètres régionaux à la demande.

Au lieu de

await import('moment/locale/en-ca');
moment.locale('en-ca');

inverser l'ordre

moment.locale('en-ca');
await import('moment/locale/en-ca');

Il semble que les paramètres régionaux sont chargés dans les paramètres régionaux actuellement sélectionnés, remplaçant les informations de paramètres régionaux précédemment définis. Donc, changer d'abord les paramètres régionaux, puis charger les informations locales ne cause pas ce problème.


0

Après avoir lutté, cela a fonctionné pour moi pour la momentv2.26.0:

import React from "react";
import moment from "moment";
import frLocale from "moment/locale/fr";
import esLocale from "moment/locale/es";

export default function App() {
  moment.locale('fr', [frLocale, esLocale]) // can pass in 'en', 'fr', or 'es'

  let x = moment("2020-01-01 00:00:01");
  return (
    <div className="App">
      {x.format("LLL")}
      <br />
      {x.fromNow()}
    </div>
  );
}

Vous pouvez passer en, frou es. Si vous vouliez une autre langue, vous devrez importer les paramètres régionaux et les ajouter au tableau.

Si vous n'avez besoin de prendre en charge qu'une seule langue, c'est un peu plus simple:

import React from "react";
import moment from "moment";
import "moment/locale/fr"; //always use French

export default function App() {  
  let x = moment("2020-01-01 00:00:01");
  return (
    <div className="App">
      {x.format("LLL")}
      <br />
      {x.fromNow()}
    </div>
  );
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.