[Material-UI Pickers] date-fnsでカレンダーを日本語に設定する

[Material-UI Pickers] date-fnsでカレンダーを日本語に設定する

Material-UI Pickersでdate-fnsを使用する場合のカレンダーを日本語に設定します。
date-fnsが公式で提供する日本語用のロケールを使ってMaterial-UI Pickersのロケールに設定します。

date-fnsの日本語用のロケール

以下をimportします。

import ja from "date-fns/locale/ja";

Material-UI PickersのProviderに指定

Providerとしてスコープ内で使用するピッカーに対して一括で設定します。
日本語であればlocaleにjaを設定します。
多言語に対応する場合はここを変数で切り替えれば一括で制御することが出来ます。

<MuiPickersUtilsProvider utils={DateFnsUtils} locale={ja}>

プログラミングカテゴリの最新記事