我如何改变moment.js的语言

时间:2013-07-05 16:28:57

标签: javascript jquery momentjs

我正在尝试更改由moment.js设置的日期语言。默认一个是英语,但我想用德语。这些是我试过的:

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

给予NAN,没有用。

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

没有做出反应,也没有起作用。

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

没有变化,仍然是英语,也没有用。

这怎么可能?

22 个答案:

答案 0 :(得分:213)

你需要moment.lang(警告lang()2.8.0开始就被弃用,改为使用locale()):

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

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


从v2.8.1开始,moment.locale('de')设置了本地化,但未返回moment。一些例子:

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'

总之,在全局locale上调用moment会为所有将来的moment实例设置区域设置,但不会返回moment的实例。在实例上调用locale,为该实例设置它并返回该实例。

答案 1 :(得分:82)

我还必须导入语言:

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

然后像往常一样使用时刻

alert(moment(date).fromNow())

答案 2 :(得分:55)

最快的方法:使用Bower安装

我刚刚在我的html项目中安装了bower和链接de.js作为javascript资源的时刻。

bower install moment --save

您也可以手动下载moment.jsde.js

Link' de.js'在你的项目中

链接我的主项目文件中的de.js会自动更改当前类及其方法的所有访问的区域设置。

不再需要来执行moment.locale("de").或 源代码中的moment.lang("de").

只需链接您想要的语言环境,如下所示:

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

或者你可以在没有bower_components路径的情况下链接库,如果你通过右键单击下载了moment.js 1990ies-style,这在大多数情况下都能正常工作。

答案 3 :(得分:33)

使用momentjs 2.8+,执行以下操作:

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

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

答案 4 :(得分:10)

您需要在脚本中添加moment.lang(navigator.language)

还必须添加要显示的每个国家/地区区域设置:例如,对于GB或FR,您需要在moment.js库中添加该区域设置格式。 momentjs文档中提供了此类格式的示例。如果你不在moment.js中添加这种格式,那么它总是选择美国语言环境,因为这是我目前唯一看到的语言环境。

答案 5 :(得分:7)

2017/2018年末:他们的答案中有太多旧代码需要编辑,所以这里我的另类清晰答案:

with require

let moment = require('moment');
require('moment/locale/fr.js');

带进口

import moment from 'moment';
import 'moment/locale/fr';

使用:

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

带有时区

*需要:

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

*导入:

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

使用区域:

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");

格式化日期的功能

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
  }  
};

答案 6 :(得分:6)

对于METEOR用户:

默认情况下,未在meteor中安装

时刻区域设置,您只能获得&#39; en&#39;具有默认安装的语言环境。

因此,您可以在其他答案中正确使用代码:

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

但在您安装所需的语言环境之前,它将保留为英语。

有一种很好的,干净的方法可以在流星中添加瞬间的个别区域设置(由 rzymek 提供)。

以通常的流星方式安装时刻包:

meteor add rzymek:moment

然后只需添加您需要的区域设置,例如意大利语:

meteor add rzymek:moment-locale-it

或者如果你真的想要添加所有可用的语言环境(为你的页面增加大约30k):

meteor add rzymek:moment-locales

答案 7 :(得分:3)

我不确定发生了什么变化,但是导入这样的语言文件对我来说很有效

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

在导入语句中注意src

答案 8 :(得分:3)

随着时刻2.18.1及以后:

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

答案 9 :(得分:2)

正常工作:return moment(status.created_at).locale('es').fromNow();

答案 10 :(得分:2)

此功能只能通过自动检测当前用户位置来实现。

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

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

答案 11 :(得分:2)

对我来说,有一些变化(版本2.20)

  1. 您使用moment.locale('de')设置区域设置,然后通过moment()(注意括号)然后format('LLL')创建一个表示现在日期的新对象。括号很重要。
  2. 这意味着:

    moment.locale('de');
    var now = moment();
    now.format('LLL');
    
    1. 另外,请记住使用moment-with-locale.js。该文件包含所有区域设置信息,文件大小较大。下载locale文件夹是不够的。如有必要,请将名称更改为moment.js。 Django只是拒绝在我的案例中加载moment-with-locale.js
    2. 编辑: 事实证明,重命名文件是没有必要的。我只是忘了在页面中调用它,所以Django不认为加载它是必要的,所以我的错。

答案 12 :(得分:2)

根据版本

更改时间js语言

版本:2.8 +

moment.locale(&#39;喜&#39);

版本:2.5.1

moment.lang(&#39;喜&#39);

答案 13 :(得分:2)

我使用的是angular2-moment,但使用方法必须类似。

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

export class AppModule {

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

答案 14 :(得分:2)

当我使用webpack与gulp和朋友(this generator为我设置一切)时,我不得不对bower.json文件进行更改。我必须覆盖当前包的默认导入,并选择所有语言附带的文件:

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

这是我的完整bower.json文件:

{
  "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"
  }
}

答案 15 :(得分:2)

<!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>

Demo

答案 16 :(得分:1)

momentjs 2.12 + ,请执行以下操作:

moment.updateLocale('de');

另请注意,您必须使用moment.updateLocale(localeName, config)更改现有区域设置。 moment.defineLocale(localeName, config)只应用于创建新的区域设置。

答案 17 :(得分:1)

经过奋斗,这对moment v2.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>
  );
}

您可以传入enfres。如果您想要其他语言,则必须导入语言环境并将其添加到数组中。

如果您只需要支持一种语言,则要简单一些:

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>
  );
}

答案 18 :(得分:0)

对于那些在异步环境中工作的用户,moment在按需加载语言环境时表现异常。

代替

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

取消顺序

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

似乎语言环境已加载到当前选定的语言环境中,从而覆盖了之前设置的任何语言环境信息。因此,首先切换语言环境,然后加载语言环境信息不会导致此问题。

答案 19 :(得分:0)

哎呀笔。我解决了这个问题: <span> Lat:{{vm.user.location[1]}}, Long:{{vm.user.location[0]}} </span> 其他方式似乎并非在条件下坚持/保持(对我而言)。

答案 20 :(得分:0)

首先调用 p5.js 和 moment-with-locales.js,然后执行如下代码,您将得到结果。

在这个结果中,我用不同的语言显示了月份名称:)

请检查代码:

     var monthNameEnglish = moment().locale('en-gb').format('MMMM');
    document.getElementById('monthNameEnglish').innerHTML =  monthNameEnglish;
    
    
         var monthNameGerman = moment().locale('de').format('MMMM');
    document.getElementById('monthNameGerman').innerHTML =  monthNameGerman;
<!DOCTYPE html>
<html>
    <head>
        <title>P5.js and Moment.js</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment-with-locales.js"></script>
    
    <h3>English Version Month Name</h3>
    
    <p id="monthNameEnglish"></p>
    
    <h3> German Version Month Name</h3>
    
    <p id="monthNameGerman"></p>
        
    </head>
    <body>
    </body>
</html>

答案 21 :(得分:0)

要使用 moment(版本高于 2.8.0)更改语言环境,请执行以下步骤。

  1. 在index.html中加载moment locale文件如下 <script src="../node_modules/moment/locale/it.js"></script>

  2. 根据需要设置语言环境 - moment.locale('it');

  3. 现在 moment.locale() 将返回“它”

  4. 您可以将 moment 与任何语言一起使用,例如 - JavaScriptAngular、node 等

相关问题