更改react-datepicker中的区域设置

问题描述 投票：0回答：7

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

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

reactjs localization react-datepicker
7个回答
67
投票

首先确保您使用的是最新版本的插件（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

30
投票

对于那些不想依赖 

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} />
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
库来实现它，但它对我的代码不起作用。抱歉

6
投票

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

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

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

然后您可以像使用其他语言环境一样使用此语言环境

<DatePicker
  locale="bg"
  ...
/>
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");
}

希望这有帮助。

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} />
0
投票

以下是最新版本 2024+ 的操作方法

npm install date-fns

npm install react-datepicker (For .js)

npm i @types/react-datepicker (For .tsx)

用途：

import DatePicker, { registerLocale } from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

import vi from "date-fns/locale/vi"; // The locale you want: vi, en, cn, in,..etc .


registerLocale("vi", vi);

查看所有国家的所有列表代码这里

          <DatePicker
            locale="vi" //add here
            selected={startDate}
            onChange={(date) => setStartDate(date)}
            selectsStart
            startDate={startDate}
            endDate={endDate}
            className="form-control"
          />

结果：

之前：

之后：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.