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')

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

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

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

VueアプリケーションのVersion管理（キャッシュ対策）

 VueでSPAアプリケーションをつくってWebに公開すると、はじめから予想されたことだが、ブラウザにキャッシュされるので、サーバにおくアプリケーションのバージョンをあげても、ローカルの古いバージョンのまま使用するユーザーが発生する。

やはり、最初にサーバから現在のバージョン番号を取得して、自分自身（ローカル）のバージョンと異なったらリロードしてもらうのがいいだろう。

自分自身のバージョンは、package.jsonのversionを利用することにしよう。

import { version } from '../../package.json'

なお、上記で以下のエラーが出る場合は、

Cannot find module '../../package.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.Vetur(2732)

tsconfig.jsonに、以下を追加する。

"compilerOptions": {

↓↓

  "resolveJsonModule": true,

↑↑

アプリケーションが表示されたら、最初にサーバにアクセスしてバージョン番号を取得し、自分自身のバージョンと比較して異なる場合は、以下のようにリロードする。

location.reload()

リロードした結果、サーバとローカルのバージョンが一致すれば「更新しました」、一致しなければ「更新できませんでした」のようなメッセージをそれぞれ表示させる。

くれぐれも、一致するまでリロードが無限ループしないように注意。

当該処理が、リロード後であることを判断する方法は、いろいろあるようだが、検証が面倒なので、今回はsessionStorageを使った。

location.reload(true)がdeplicatedになって、location.reload()だとキャッシュ読んじゃうんじゃないかと心配したが、ちゃんと更新してくれたのでとりあえず、深入りしないことにしよう。