在 blueprintjs datetime react 组件中设置语言环境答案

【问题标题】：setting locale in blueprintjs datetime react component在 blueprintjs datetime react 组件中设置语言环境
【发布时间】：2018-01-19 19:32:35
【问题描述】：

我正在尝试设置 blueprintjs DateRangeInput 的语言环境。文档声明该组件使用 Moment.js 进行本地化。所以我尝试设置locale="de"，但语言仍然是英语。任何想法都缺少什么来获得翻译的日期输入？

我对 React 编程还很陌生，所以我不能确定这与我的 React 技能无关，即使传递道具对我来说似乎很正确。

<DateRangeInput
    locale={"de"}
    value={dates}
    onChange={...}
/>

【问题讨论】：

标签： reactjs datepicker momentjs blueprintjs

【解决方案1】：

尝试将此import "moment/locale/de" 添加到文件顶部

我认为 blueprint 使用 new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) 从 moment 中删除语言环境，这很常见，因为 moment 非常大。

如果这不起作用，请尝试将其添加到您的 webpack 插件中

new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de/)

【讨论】：

感谢您的回复。我将import 添加到我的组件文件以及webpack 插件部分的sn-p，但日期选择器仍然是全英文的。导入没有抛出任何错误，所以我猜是正确加载语言环境的那一刻。我不明白，为什么它仍然不起作用:(如果我可以更新任何库，我会看看。
似乎DateRangeInput 使用react-day-picker react-day-picker.js.org/docs/localization，他们建议也传递localeUtils 道具

【解决方案2】：

DateTime 组件（日期选择器、日期范围选择器、时间选择器、日期时间选择器、日期输入和日期范围输入）都依赖于 react-day-picker。

要设置所需的语言环境，根据react-day-picker documentation，您需要如上所述从时刻导入所需的语言环境并设置localeUtils（一组用于根据当前语言环境渲染组件的函数）。

下面的代码是它的工作原理。

import React from 'react';
import { DateRangeInput } from "@blueprintjs/datetime";
import 'react-day-picker/lib/style.css';

// Include the locale utils designed for moment
import MomentLocaleUtils from 'react-day-picker/moment';

// Make sure moment.js has the required locale data
import 'moment/locale/ja';

export default class LocalizedExample extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <DateRangeInput localeUtils={MomentLocaleUtils} locale='ja' />
      </div>
    );
  }
}

【讨论】：