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を使うことができます！
使い方は importした変数名を書くだけでカレンダが使えます。

.js

<template lang="pug">
  div
    DatePicker
</template>

カレンダーが英語になっているので日本語かにするためには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>

日本語化にできたと思ったら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>

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>

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

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

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

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

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

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>

これでdatePickerinputのコードが完成しました！

.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ビルドオプションに追加する必要がある」よく分からない要はライブラリ内のコンポーネントはコンパイルされなく、IE11に対応したコードが出力されないようです。

nuxt.config.js

export default {
  build: {
    transpile: ['vuejs-datepicker'], //追加
  },
};

以上です。！

参考

vuejs-datepicker gitHub
vuejs-datepicker 使い方