【问题标题】:Adding moment locale break the initial date添加时刻区域设置会破坏初始日期
【发布时间】:2018-02-28 17:28:02
【问题描述】:

我有一个奇怪的问题,我无法解释:

我有我的约会:Wed Feb 28 2018 16:24:37 GMT+0100 (CET)

当我添加import 'moment/locale/fr'; 时,相同的日期变为Sun Jan 28 2018 16:24:37 GMT+0100 (CET)

谁能解释我做错了什么?

这是完整的例子

import React from 'react';
import moment from 'moment';
// ====== adding locale break the date    ======= //
// import 'moment/locale/fr';

// time value is : Wed Feb 28 2018 16:24:37 GMT+0100 (CET)

const Time = ({ time }) => (
    <p>
        {moment(time).format('DD-MM-YYYY HH:mm:ss')}
    </p>
);

// output without locale/fr is : 28-02-2018 16:24:37
// output with locale/fr is : 28-01-2018 16:24:37

之后我将使用.fromNow()moment 函数来显示现在与给定时间之间的时间距离。

【问题讨论】:

  • @RobG 我已经更新了代码。这是一个显示日期的简单无状态反应组件
  • time 的值是多少?无论如何使用format() 或toString() 打印时刻对象的值。
  • @VincenzoC 我已经用输入和输出更新了代码,有和没有添加语言环境/fr
  • 如果您的时间值是英文并且您的 format() 没有任何特定于语言环境的输出,为什么还需要使用 moment/locale/fr?

标签: javascript reactjs date momentjs locale


【解决方案1】:

如果您在不提供输入格式的情况下解析字符串,moment.js 首先会尝试 ISO 8601 格式。如果不匹配,则回退到内置解析器。您应该收到不要这样做的警告(因为这是个坏主意)。

如果您提供带有法语语言环境文件的解析格式 ('ddd MMM DD YYYY HH:mm:ss ZZ') 并且未指定输入字符串为英语,则该字符串似乎被解析为它是法语,“Feb”被解析为“janvier”(一月)而不是 février(二月)。

您需要提供输入字符串的解析格式和语言:

moment('Wed Feb 28 2018 16:24:37 GMT+0100 (CET)', 'ddd MMM DD YYYY HH:mm:ss ZZ', 'en')

// Without providing parse format
console.log(moment('Wed Feb 28 2018 16:24:37 GMT+0100 (CET)').format('DD-MM-YYYY HH:mm:ss'));

// With parse format but not input langauge
console.log(moment('Wed Feb 28 2018 16:24:37 GMT+0100 (CET)', 'ddd MMM DD YYYY HH:mm:ss ZZ').format('DD-MM-YYYY HH:mm:ss'));

// With parse format and input langauge (recommended approach)
console.log(moment('Wed Feb 28 2018 16:24:37 GMT+0100 (CET)', 'ddd MMM DD YYYY HH:mm:ss ZZ', 'en').format('DD-MM-YYYY HH:mm:ss'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/fr.js"></script>

【讨论】:

  • 第一个格式参数应该是ddd而不是do,do是1st..31st - Day of month with ordinal
【解决方案2】:

尝试这样的事情(我们需要从moment/locale/fr 导入以确保它在客户端加载)。所以用英文解析,然后切换到你需要的locale,然后用fromNow输出时差:

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

const Time = ({ time }) => (
    <p>
        {moment(time, 'ddd MMM DD YYYY HH:mm:ss Z').locale('fr').fromNow()}
    </p>
);

【讨论】:

  • 它应该显示one day ago,但输出错误il y a un mois相当于one month ago
  • 即使给出了它不起作用的确切格式(它有时甚至显示“无效日期”
  • @Ayyoub 所以你的time 与你展示给我们的格式不同,我使用的正是你在Wed Feb 28 2018 16:24:37 GMT+0100 (CET)帖子中的字符串
  • 有效吗?我硬编码了日期,但它不起作用:(
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-08-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多