在 blueprintjs 日期时间反应组件中设置语言环境

Question

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

我是 React 编程的新手，所以我不能确定它与我的 React 技能无关，即使传递 props 对我来说似乎很正确。

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

Answer 1

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

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

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

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

Answer 2

日期时间组件（日期选择器、日期范围选择器、时间选择器、日期时间选择器、日期输入和日期范围输入）都依赖于 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>
    );
  }
}

在 blueprintjs 日期时间反应组件中设置语言环境

setting locale in blueprintjs datetime react component

datepicker

momentjs

reactjs

blueprintjs