Question

我正在使用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 }
          />
...

这是我要导入语言环境的代码。

Answer 1

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

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

const locale = {
  localize: {
    month: n => months[n],
    day: n => days[n]
  },
  formatLong: {}
}

<DatePicker locale={locale} />

Answer 2

首先，请确保您使用的是最新版本的插件（ 2.0.0 ）。然后，您还需要安装date-fns模块，但是目前react-datepicker正在使用2.0.0-alpha.23版本。

然后，您需要导入并注册所需的语言环境，最后将locale属性添加到DatePicker

如此（安装正确的版本后）

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上的工作演示

Answer 3

GetList(string.Empty).ToDictionary(lt => lt.ID, lt => lt.ToDto())

我可以得到您想要的结果。而且我尝试使用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;库来实现它，但是它不适用于我的代码。抱歉

Answer 4

您甚至不需要使用 registerLocale ，只需使用不带引号的导入变量名称 ja 即可：

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

您还可以使用 setDefaultLocale 为所有日期选择器字段设置默认语言环境：

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

希望这会有所帮助。

Answer 5

如果您要使用date-fns不支持的语言环境（而且这些语言很少），可以进行填充。

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

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

然后您可以将该语言环境用作其他语言

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

Answer 6

对于动态语言环境导入，您可以使用此代码。但是，您将获得具有动态导入功能的更大软件包：

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

然后使用

<DatePicker locale={this.locale} />

在react-datepicker中更改语言环境

6 个答案: