Vue 3でVueDatePickerを日本語対応する方法｜locale・format設定を解説【サンプル付き】

#プログラム #Vue.js

記事をシェア：

コピー

こんにちは。飯塚です。

最近、 Vue3 の VueDatePicker を使って、カレンダーを表示させる画面がありました。海外のライブラリあるあるですが、日本語対応には複数の設定が必要だったため、記事にまとめました。

VueDatePicker とは

「The most complete datepicker solution for Vue 3」と謳っている通り、Vue3でカレンダーを扱うなら、やりたいことはおそらく全部できるであろうライブラリです。プロパティも網羅的で、リファレンスも細かく書いてあります。

Vuetify3 の Date pickers を最初検討していたのですが、Vuetify3 は更新頻度が激しくドキュメントが追い付いていないことがあります。また、開始日～終了日のセットで持たせる仕様があったのですが、VueDatePicker はプロパティの設定だけでほしいデータ形式を実現できたので採用しました。

Vue3 で VueDatePicker を日本語対応する前の CodePen サンプルプログラム

インストール直後の動作確認を想定して、日本語対応前のシンプルなサンプルを貼ります。
【CodePen】Vue3 VueDatePickerサンプル

「Do not enter passwords or personal information on this page.」と表示されて見づらい場合は、お手数ですがリンクを押してCodePenのサイトに移動してください。

Vue3 で VueDatePicker を日本語対応した CodePen サンプルプログラム

日本語対応したサンプルは下記です。簡単にするため、時刻表示を省いて日付のみの表記にしています。
【CodePen】Vue3 VueDatePickerサンプル日本語対応

ポイントをピックアップして解説します。

<vue-date-picker
  v-model='targetDate'  
  locale="ja"
  format="yyyy/MM/dd"
  model-type="yyyy-MM-dd"
  :enable-time-picker="false"
  auto-apply
></vue-date-picker>

locale
ロケールを指定できます。日本にしたいので「ja」です。
VueDatePickerリファレンスlocale

format
画面に表示する日付のフォーマットを指定します。
VueDatePickerリファレンス format

model-type
v-modelの日付のフォーマットも指定できます。バックエンドにJSONパラメータとして渡すなら、指定すると楽ですよね。
VueDatePickerリファレンス model-type