![[Material-UI Pickers] date-fnsでカレンダーを日本語に設定する](https://wonwon-eater.com/wp-content/uploads/2020/08/hardwood-1851071_640-640x410.jpg)
Material-UIのDatePickerをTypeScriptで使用する時、公式のリファレンス通りに記述すると型不一致のエラーが発生します。 エラープログラム import React, { us…
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}>
