2021年7月1日木曜日

Element PlusのDatePickerで週の開始日を指定する

 ElementのDatePickerではfirstDayOfWeekを指定することによって、週の開始日(曜日)を指定することができた。

ところが、Element PlusのDatePickerでは、そのようなオプションが見当たらない。

https://github.com/element-plus/element-plus/issues/1055によると、代わりにDay.jsのロケールを使ってねということらしい。

例えば、Day.jsのアフリカのロケール(af.js)には、以下のような記述が含まれている。

weekStart: 1

これを使うらしい。

日本のロケール(ja.js)には、そのような記述が含まれていないが、追記したものを別ロケール(ja-my.js)として保存した。

通常は、

import ElementPlus from 'element-plus'
import locale from 'element-plus/lib/locale/lang/ja'

createApp(App).use(ElementPlus, { locale })

とすることで、Day.jsのロケールも自動的にセットされるのだが、

import 'dayjs/locale/ja-my'
dayjs.locale('ja-my')

を追加することで、今回作成した週の開始日が指定されたロケールを指定できるようだ。

以下は、土曜日を週の開始日に設定した例


ちょっと、これはドキュメントを読んでもわからないよなぁ。
もっとも、こんな変則的な曜日並びのカレンダー表示させるほうがおかしいと言われれば、その通りなんだけど。