web-dev-qa-db-ja.com

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

これは、ロケールをインポートするコードです。

reactjslocalizationreact-datepicker
9
Stevan Tosic

まず、最新バージョンのプラグイン（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 で作業デモ

12
Gabriele Petrioli
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ライブラリで作成しようとしましたが、私のコードでは機能しませんでした。ごめんなさい

2
t.kuriyama

registerLocaleを使用する必要すらなく、引用符なしでインポート変数名jaを使用するだけです。

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

setDefaultLocaleを使用して、すべての日付ピッカーフィールドのデフォルトロケールを設定することもできます。

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

お役に立てれば。

1
Takman

に依存したくない人のために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} />
1
ozgrozer

Date-fnsでサポートされていないロケールを使用したい場合（そしてそれらはごく少数です）、shimを実行できます。

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

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

次に、このロケールを他のロケールと同じように使用できます

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