Reactjs 更改react datepicker中的区域设置

我正在使用NPM软件包，
我试图按照文档进行操作，但无法导入

registerLocale 

及

从

react-datepicker

你知道我哪里出错了吗

 import DatePicker from 'react-datepicker';



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

从'react DatePicker'导入日期选择器；
...
{this.ref=node；}}
onClickOutside={this.clickOutside}
/>
...

---

这是我要导入区域设置的代码。

首先确保您使用的是最新版本的插件（2.0.0）。 然后您还需要安装

日期fns

模块，但目前

反应日期选择器

正在使用2.0.0-alpha.23版本

然后需要导入并注册所需的区域设置，最后将

locale

属性添加到

DatePicker

so（安装正确版本后）

并使用它

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

在

import React，{Component}从'React'导入演示；
从“react DatePicker”导入日期选择器，{registerLocale}；
导入“react datepicker/dist/react datepicker.css”；
从“日期fns/locale/ja”导入ja；
注册地（“ja”，ja）；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
日期：新日期（）
}
this.handleChange=this.handleChange.bind（this）；
}
手册更改（日期）{
这是我的国家({
日期
});
}
render（）{
返回(
);
}
}
导出默认应用程序；

---

我可以得到你想要的结果。我试着用

moment

库实现它，但在我的代码中它不起作用。抱歉

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

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

---

希望这对您有所帮助。

如果您想使用date fns不支持的区域设置（而且数量很少），您可以使用垫片

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

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

然后你可以像其他语言一样使用这个语言环境

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

---

对于那些不想依赖于

日期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} />

const months=['Ocak'，'ubat'，'Mart'，'Nisan'，'Mayıs'，'Haziran'，'Temmuz'，'Ağustos'，'Eylül'，'Ekim'，'Kasım'，'Aralık']
施工天数=['Pt'、'Sa'、'ca'、'Pe'、'Cu'、'Ct'、'Pz']
常量区域设置={
本地化：{
月份：n=>月份[n]，
天：n=>天[n]
},
formatLong:{}
}

对于动态区域设置导入，您可以使用此代码。但是，您将获得一个包含动态导入的更大包：

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

然后使用

<DatePicker locale={this.locale} />

我使用的npm库：*日期-fns@next*上帝保佑你！我在react datepicker文档的任何地方都找不到alpha级别的外部库中的依赖项。有没有针对date fns的非alpha版本的解决方案？非常感谢。谢谢你，伙计！来自BG的问候。

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

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} />

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

<DatePicker locale={this.locale} />