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


# はじめに
Nuxt.jsでvuejs-datePickerを使って、カレンダーを表示してみました。デフォルトで英語で表示されます。
よく見るカレンダーのフォーマットなので、このままで良いかなあと思ったのですが、月を変更しようと思ったら`January` `February`。。。と表示されました。
ここは、`1月` `2月`。。。と表示させたいので、カレンダーの表示言語を切替えてみました。対応に手間取ったので備忘として残しておきます。言語の動的切替えも可能です。
![スクリーンショット 2022-05-29 23.34.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1831361/c57288c4-c26f-b379-89a7-e35928b320a6.png)　![スクリーンショット 2022-05-29 23.34.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1831361/669d7806-2544-d90a-4d28-184f56aa7376.png)

# 環境
- 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のオブジェクトはこんな感じ
```js
$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>
```
```js
 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を使います。

```vue
<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>