Ste*_*sic 3 localization reactjs react-datepicker
我正在使用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 }
/>
...
这是我要导入语言环境的代码。
ozg*_*zer 11
对于那些不想依赖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} />
首先，请确保您使用的是最新版本的插件（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上的工作演示
小智 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库来制作它，但它对我的代码不起作用。对不起
如果您想使用 date-fns 不支持的语言环境（而且这些语言环境很少），您可以使用填充程序。
\n\nconst monthsBG = [\'\xd0\xaf\xd0\xbd\xd1\x83\xd0\xb0\xd1\x80\xd0\xb8\', \'\xd0\xa4\xd0\xb5\xd0\xb2\xd1\x80\xd1\x83\xd0\xb0\xd1\x80\xd0\xb8\', \'\xd0\x9c\xd0\xb0\xd1\x80\xd1\x82\', \'\xd0\x90\xd0\xbf\xd1\x80\xd0\xb8\xd0\xbb\', \'\xd0\x9c\xd0\xb0\xd0\xb9\', \'\xd0\xae\xd0\xbd\xd0\xb8\', \'\xd0\xae\xd0\xbb\xd0\xb8\', \'\xd0\x90\xd0\xb2\xd0\xb3\xd1\x83\xd1\x81\xd1\x82\', \'\xd0\xa1\xd0\xb5\xd0\xbf\xd1\x82\xd0\xb5\xd0\xbc\xd0\xb2\xd1\x80\xd0\xb8\', \'\xd0\x9e\xd0\xba\xd1\x82\xd0\xbe\xd0\xbc\xd0\xb2\xd1\x80\xd0\xb8\', \'\xd0\x9d\xd0\xbe\xd0\xb5\xd0\xbc\xd0\xb2\xd1\x80\xd0\xb8\', \'\xd0\x94\xd0\xb5\xd0\xba\xd0\xb5\xd0\xbc\xd0\xb2\xd1\x80\xd0\xb8\'];\nconst daysBG = [\'\xd0\xbd\xd0\xb5\xd0\xb4\', \'\xd0\xbf\xd0\xbe\xd0\xbd\', \'\xd0\xb2\xd1\x82\', \'\xd1\x81\xd1\x80\', \'\xd1\x87\xd0\xb5\xd1\x82\xd0\xb2\', \'\xd0\xbf\xd0\xb5\xd1\x82\', \'\xd1\x81\xd1\x8a\xd0\xb1\'];\n\nregisterLocale(\'bg\', {\n localize: {\n month: n => monthsBG[n],\n day: n => daysBG[n]\n }, \n formatLong:{} \n});\n然后您可以像使用任何其他语言环境一样使用该语言环境
\n\n<DatePicker\n locale="bg"\n ...\n/>\n| 归档时间： |
|
| 查看次数： |
6664 次 |
| 最近记录： |