nuxt.jsでvuejs-datepicker カレンダーに表示する言語の切替えを行う

はじめに

Nuxt.jsでvuejs-datePickerを使って、カレンダーを表示してみました。デフォルトで英語で表示されます。
よく見るカレンダーのフォーマットなので、このままで良いかなあと思ったのですが、月を変更しようと思ったらJanuary February。。。と表示されました。
ここは、1月 2月。。。と表示させたいので、カレンダーの表示言語を切替えてみました。対応に手間取ったので備忘として残しておきます。言語の動的切替えも可能です。
　

環境

• nuxt v2.15.8
• vue v2.6.14
• vuejs-datepicker v1.6.2

インストール

まずはvuejs-datepickerをインストールします。

% npm install vuejs-datepicker

プラグインに登録

nuxtでvuejsのプラグインを使うために、pluginsの直下にvuejs-datepicer.jsファイルを作成して、DatePickerをimportします。

・言語切替を行う場合

表示したい言語(locale)のimportを追加して、アプリ内で共通で使用できるようにinject宣言します。
今回は、英語・日本語・韓国語をimport＆inject宣言しています。
これでthis.$en this.$ja this.$ko　で使うことができます。

plugins/vuejs-datepicer.js

import Vue from 'vue'
import DatePicker from 'vuejs-datepicker'
import { en, ja ,ko } from 'vuejs-datepicker/dist/locale'

Vue.component('DatePicker', DatePicker)

export default (_context, inject) => {
    inject('en', en),inject('ja', ja),inject('ko', ko)
}

this.$jaのオブジェクトはこんな感じ

$ja: e
rtl: false
yearSuffix: "年"
ymd: true
_days: (7) ['日', '月', '火', '水', '木', '金', '土']
_language: "Japanese"
_months: (12) ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
_monthsAbbr: (12) ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

・言語切替を行わない場合

plugins/vuejs-datepicer.js

import Vue from 'vue'
import DatePicker from 'vuejs-datepicker'

Vue.component('DatePicker', DatePicker)

nuxt.config.jsに登録

プラグインに登録したファイルvuejs-datepicer.jsをnuxt.config.jsに追加します。
これで、vuejs-datepicerが使えるようになりました。

nuxt.config.js

  plugins: [
    '~/plugins/vuejs-datepicker.js',
  ],

使い方

vueのコンポーネントで、vuejs-datepickerのimportは不要です。

・言語切替を行う場合

languageにinject宣言したthis.$en this.$ja this.$ko　のどれか一つを渡すと、
カレンダー表示の言語を変更できます。
ユーザのlanguageなどで言語を動的に切替えたい場合は、
this.$en this.$ja this.$koのいずれかを返却する関数を作成して呼び出します。

sample.vue

  <DatePicker
    v-model="dateFrom"
    :format="DatePickerFormat" 日付のフォーマット
    :typeable="true" 日付の直接入力の可否
    :placeholder="DatePickerFormat" カレンダー入力項目のplaceholder
    input-class="calender-text-box" カレンダーの入力項目にclassを指定
    :language="this.$ja" または関数
  ></DatePicker>

 data() {
    return {
      DatePickerFormat: 'yyyy/MM/dd', 今回は日付のフォーマットとplaceholderを同じにしています
      dateFrom: '',
    }
  },

・言語切替を行わない場合

languageの指定を行わない場合は、デフォルトの英語(en)でカレンダーが表示されます。

sample.vue

  <DatePicker
    v-model="dateFrom"
    :format="DatePickerFormat"
    :typeable="true"
    :placeholder="DatePickerFormat"
    input-class="calender-text-box"
  ></DatePicker>

styleの指定

カレンダーのstyleはglobalで指定するか、scopedの場合はv-deepを使います。

<style lang="scss" scoped>
::v-deep .calender-text-box {
  height: 2.4em;
  border: 1px solid #cfd4da;
  color: #495057;
  outline: none;
  border-radius: 2px;
}
::v-deep .vdp-datepicker_calendar {
  width: 250px;
}
</style>

おしまい。

参考サイト

https://qiita.com/whw3312/items/5465081dbe8a81f9e7d4
https://hapicode.com/javascript/vuejs-datepicker.html