nuxt.jsでvuejs-datepicker カレンダーライブラリー

#はじめに
npmjs.comではVue.jsのdatepicker関連で最もダウンロードされたプラグインは`vuejs-datepicker`のようです。
ダウンロードが多いのはあ間違いなく`vuejs-datepicker`には、datepickerに必要な機能がすべて備わっているのではないかと思います。

Nuxt.jsでvuejs-datePickerを使用する時使い方や利用する方法を個人的にまとめてみました。


##インストール
```
% npm install vuejs-datepicker
% npm i -D vuejs-datepicker
```
どちらでも良いと思います。

##プラグインに登録
nuxtではvuejs用のプラグインを使用するためにはプラグインの登録が必要で`plugins`の直下にjsファイルを作成する作業が必要となります。

```plugins/vuejs-datepicker.js
import Vue from 'vue'
import DatePicker from 'vuejs-datepicker'

Vue.component('DatePicker', DatePicker)
```
##config.jsに登録
プラグインに登録したファイルを`nuxt.config.js`に呼び出しをしたらいよいよ`vuejs-datepicker`が使えるようになります。

```nuxt.config.js
plugins: [
     { src: '~/plugins/vuejs-datepicker.js', mode: 'client', ssr: false },
]
```
##使い方
実際使うcomponent内に`Datepicker`を直接importをします。

```.js

import DatePicker from 'vuejs-datepicker/src/components/Datepicker.vue'
```
これで`DatePicker `で`vuejs-datepicker`を使うことができます！:fire:
使い方は `import`した変数名を書くだけでカレンダが使えます。

```.js
<template lang="pug">
  div
    DatePicker
</template>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/271cc6fb-9453-d3f8-7eec-163c4337d84d.png)

カレンダーが英語になっているので日本語かにするためには`script`タグないに下記のコードを追加する必要があります。

```.js
import { ja } from 'vuejs-datepicker/dist/locale'
```

componentにlanguageをバインドをしたら英語→日本語になります。

```.js
  data(){
    return{
      ja:ja, //data登録
      calendarDate: ''
    }
  }
```

```.js
<template lang="pug">
  div
    DatePicker(
      :v-model='calendarDate',
      :language='ja', //日本語化バインド
    )
</templet>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/b8e7fcb4-acda-1677-273d-be17485cdb9f.png)

日本語化にできた:smiley:と思ったらformatが少し分かりづらいので`moment.js`をインストールして`format`を`YYYY-MM-DD`に変更したい思います。

```
% npm i -D moment
```
momentインストールしてから

```.js
import moment from 'moment'
```
componentの`script`タグの中にmomentをimportをします。

```.js
 methods: {
   //format custom function
   customFormatter(date) {
     return moment(date).format('YYYY-MM-DD')
   }
 }
```
formatを変えるためには`methods`を作成しバインド。

```.js
<template lang="pug">
  div
    DatePicker(
      :v-model='calendarDate',
      :language='ja', //日本語化バインド
　　　 :format='customFormatter',//formatバインド
    )
</templet>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/8e0f4289-4a03-06cc-a9a1-069a9e64bcc5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/59e5bfea-4add-09c7-019e-521dd1cfdb3a.png)

formatの変更してきたらまた新たな問題がv-modelの値が英語のままになっていて時間？よく分からない表記 `Sat Aug 01 2020 09:00:00 GMT+0900 (日本標準時)`になっていて画面に表示されているformatは表示形式を設定する為の属性らしくv-modelは単に日付オブジェクト型の仕様ようです。

解決方法としては変更されたformatをdatePickerが閉じた際`v-model`の値を`YYYY-MM-DD`に変更する流れです。

```.js
methods: {
  　pickerClosedChange() {
    　if (this.calendarDate) {
      　 this.calendarDate = moment(this.calendarDate).format('YYYY-MM-DD')
  　}
  },
}
```

```.js
<template lang="pug">
  div
    DatePicker(
      :v-model='calendarDate',
      :language='ja', //日本語化バインド
      :format='customFormatter',//formatバインド
      @closed='pickerClosedChange' //pickerを閉じた時v-modelのformatを変更
    )
</template>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/91d2613a-c00e-d568-57a9-8f2eab2ff379.png)

`format`と`v-model`の`Sat Aug 01 2020 09:00:00 GMT+0900 (日本標準時)`から値が同じく`YYYY-MM-DD`になりました。:raised_hands:


と思ったら...:thinking:
知らないうちにマークアップエラーが.....

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/4eb16900-900f-1d3d-6fa8-1acc59864ca4.png)


Nuxt.jsフレームワークと統合する場合、プラグインはSSR（Node JSによるサーバー側レンダリング）をサポートしてないので、ページ全体を壊します。実際ほとんどのdatepickerプラグインもSSRをサポートしてないようです。

SSRを対応しない場合はマークアップが正しくないエラーが下記みたいに出てしまうので

nuxt公式サイトによるとnuxtのバージョンがv2.9.0未満の場合、`<client-only> `のかわりに `<no-ssr>` を使用しを推奨するらしいです。

[client-onlyついて公式参考](https://ja.nuxtjs.org/api/components-client-only/)

```.js
<template lang="pug">
  div
    client-only //<-追加
      DatePicker(
        :v-model='calendarDate',
      　:language='ja', //日本語化バインド
     　 :format='customFormatter',//formatバインド
      　@closed='pickerClosedChange' //pickerを閉じた時v-modelのformatを変更
      )
</template>
```

これで`datePicker`inputのコードが完成しました！


```.js
<template lang="pug">
  div
    client-only //<-追加
      DatePicker(
        :v-model='calendarDate',
      　:language='ja', //日本語化バインド
     　 :format='customFormatter',//formatバインド
      　@closed='pickerClosedChange' //pickerを閉じた時v-modelのformatを変更
      )
</template>
<script>
//moment import
import moment from 'moment'
//DatePicker import
import DatePicker from 'vuejs-datepicker/src/components/Datepicker.vue'
//言語をimport
import { ja } from 'vuejs-datepicker/dist/locale'
export default {
  data(){
    return{
      ja:ja, //data登録
      calendarDate: ''
    }
  },
  methods: {
    /*format custom function
    * datePickerのformatをYYYY-MM-DDにする
    */
    customFormatter(date) {
      return moment(date).format('YYYY-MM-DD')
    },
    /*v-model vule custom function
    * datePickerを閉じた時formatをYYYY-MM-DDにする
    */
    pickerClosedChange() {
      if (this.calendarDate) {
         this.calendarDate = moment(this.calendarDate).format('YYYY-MM-DD')
      }
    },
  }
}
</script>
```
最後にこのまま使ってしまうとIEで動かなくなったのでIE対応するため`nuxt.config.js`を修正する必要があります。ちょこっと調べたらプラグインが「`node_modulesでにあり、`ES6`モジュールをエクスポートしている場合、それを transpileビルドオプションに追加する必要がある`」:confounded:よく分からない要はライブラリ内のコンポーネントはコンパイルされなく、IE11に対応したコードが出力されないようです。

```nuxt.config.js
export default {
  build: {
    transpile: ['vuejs-datepicker'], //追加
  },
};
```
以上です。！:clap:

##参考
[vuejs-datepicker gitHub](https://github.com/charliekassel/vuejs-datepicker)
[vuejs-datepicker 使い方](https://hapicode.com/javascript/vuejs-datepicker.html)
[](https://aslamdoctor.com/blog/using-vuejs-datepicker-with-nuxt-js/226)