React + Material UI pickers 月曜始まりにしたい時

Material UI pickers のカレンダー表示を月曜始まりにしたかったのですが、公式読んでもぱっと分からなかったので、記事にまとめてみました。

前提/環境

• Material UI pickers Docs

    "@date-io/date-fns": "^1.3.13",
    "@material-ui/pickers": "^3.2.10",
    "date-fns": "^2.17.0",
    "react": "^16.13.1",

コード例

import 設定部分

// date picker
import 'date-fns';
import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers';
import locale from 'date-fns/locale/en-US';
if (locale && locale.options) {
  locale.options.weekStartsOn = 1;
}

Component render部分

        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={locale}>
          <KeyboardDatePicker
            placeholder="2021/02/21"
            value={date}
            onChange={date => changeDate(date)}
            format="yyyy/MM/dd"
          />
        </MuiPickersUtilsProvider>

参考記事

• date - How to display start day of week as Wednesday in material-ui-pickers? - Stack Overflow
• How to customize start day of week to arbitrary values (not based on the locale)? · Issue #1626 · mui-org/material-ui-pickers · GitHub

おまけ

日本語化したい時も、少し一工夫が必要みたいで、次の記事が参考になりそうでした。

Material-UI Pickersの日本語化について - blog.beaglesoft.net

また、公式に書いてありますが、pickerの依存関係のライブラリをインストールする時、バージョンの指定をきちんとしないとエラーになるので、要注意です。
npm i @date-io/date-fns@1.x date-fns