rsuiterでの日本語表示方法

はじめに

日付を範囲で絞り込めるようにしたいという機会がありまして(個人開発第2弾でもやるつもりでした)、rsuiterというUIライブラリを使ってDateRangePickerを実装したのですが、デフォルトが英語だったので日本語にする方法を調べたら、単にProps渡せばいいという話ではなかったので、若干癖あるなとちょっと思って記録します。

結論

DateRangePicker自体はDateRangePickerをrsuiteからインポートしたら使えますが(CSSも必要ですが)、追加でCustomProvider、jaJPが必要でした。

import { CustomProvider, DateRangePicker } from 'rsuite';
import 'rsuite/dist/rsuite.min.css';
import { jaJP } from 'rsuite/esm/locales';

↓公式です。

DateRangePickerをCustomProviderでラップして、CustomProviderのPropsにlocale={jaJP}を渡せば日本語になりました。

使い方は下記のようなイメージです。

<CustomProvider locale={jaJP}>
      <DateRangePicker
        placeholder='開始日 ～ 終了日'
        format='yyyy/MM/dd'
        size='lg'
        showOneCalendar
      />
    </CustomProvider>

おわりに

だいたい直接DateRangePickerのlacaleにjaみたいな感じで渡せばいいかなと思ってやろうとしたら全然違ったので共有させていただきました。

rsuiteを使用する機会があれば参考にしてください。