在 react-datepicker 中更改语言环境

Question

在 react-datepicker 中更改语言环境

33

我正在使用react-datepicker NPM包，
我尝试遵循文档，但无法导入

registerLocale

和

setDefaultLocale

来自react-datepicker

你看到我犯了什么错误吗？

 import DatePicker from 'react-datepicker';



...
    <DatePicker
            { ...this.props }
            dateFormat={ this.dateFormat }
            ref={ (node) => { this.ref = node; } }
            onClickOutside={ this.clickOutside }
          />
...

这是一段代码，我想要导入本地化。

- Stevan Tosic

6个回答

28

对于那些不想依赖date-fns模块的人，您可以定义自己的本地化。

这是一个在CodeSandbox上工作的演示。

const days = ['Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct', 'Pz']
const months = ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık']

const locale = {
  localize: {
    day: n => days[n],
    month: n => months[n]
  },
  formatLong: {
    date: () => 'mm/dd/yyyy'
  }
}

<DatePicker locale={locale} />

- ozgrozer

2

这个不起作用。 TypeError: formatLong.date 不是一个函数。 - Mees van Wel

1

我已经更新了答案，并提供了一个 CodeSandbox 链接。 - ozgrozer

虽然我不得不在地区设置中添加一个匹配属性(空回调)才能使其正常工作，但这对我有用。我想通过使用 useShortMonthInPicker 属性来将短月份显示在 showMonthInPicker 旁边，但我仍然看到完整的月份。我查看了 date-fns 的 Locale 类型文档，但没有找到如何实现这一点的方法。 - Klaymant

1

听起来不错 - 但是对于最近的react-datepicker，该软件包本身依赖于date-fns，因此我不知道这有多有用（如果它实际上减少了捆绑包大小）。 - giraff

6

import React, { Component } from 'react';
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import ja from "date-fns/locale/ja";

registerLocale("ja", ja);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      date
    });
  }

  render() {
    return (
      <div className="App">
        <body>
          <DatePicker
            dateFormat="yyyy/MM/dd"
            selected={this.state.date}
            onChange={this.handleChange}
            locale='ja'
          />
        </body>
      </div>
    );
  }
}

export default App;

我能够得到您想要的结果。我尝试使用 moment 库，但它在我的代码中无法工作。抱歉。

- t.kuriyama

我使用的npm库：

date-fns@next
react-datepicker

- t.kuriyama

6

如果您想使用 date-fns 不支持的语言环境（这种情况很少见），您可以进行 shim 处理。

const monthsBG = ['Януари', 'Февруари', 'Март', 'Април', 'Май', 'Юни', 'Юли', 'Август', 'Септември', 'Октомври', 'Ноември', 'Декември'];
const daysBG = ['нед', 'пон', 'вт', 'ср', 'четв', 'пет', 'съб'];

registerLocale('bg', {
  localize: {
    month: n => monthsBG[n],
    day: n => daysBG[n]
  }, 
  formatLong:{} 
});

然后你可以像使用其他本地化方式一样使用它

<DatePicker
  locale="bg"
  ...
/>

- Arntor

谢谢你，伙计！来自保加利亚的问候。 - Zhivko Zhelev

3

你甚至不需要使用registerLocale，只需使用变量名ja导入即可，无需引号：

<DatePicker
  dateFormat="yyyy/MM/dd"
  selected={this.state.date}
  onChange={this.handleChange}
  locale=ja
/>

你可以使用 setDefaultLocale 方法为所有日期选择器字段设置默认区域设置：

constructor (props) {
    registerLocale("ja", ja);
    setDefaultLocale("ja");
}

希望这有所帮助。

- Takman

2

如果需要动态导入语言环境，可以使用以下代码。但是，使用动态导入将会得到一个更大的包：

constructor(props) {
    const getLocale = locale => require(`date-fns/locale/${this.props.language}/index.js`)
    this.locale = getLocale(this.props.language);
}

然后使用

<DatePicker locale={this.locale} />

- Peter Andersson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabriele Petrioli · Accepted Answer

首先确保您使用的是插件的最新版本（2.0.0）。然后需要安装date-fns模块，但目前react-datepicker可以使用2.0.0-alpha.23版本。接着导入并注册所需的语言环境，在DatePicker上添加locale属性即可。所以在正确安装版本后，进行以上操作。

import DatePicker, { registerLocale } from "react-datepicker";
import el from "date-fns/locale/el"; // the locale you want
registerLocale("el", el); // register it with the name you want

并使用它

<DatePicker 
    locale="el"
    ...
/>

演示请访问https://codesandbox.io/s/7j8z7kvy06