はじめに

Datepickerライブラリ Vue-flatPickr の導入メモです。
※ Vuex が必要がないときは README の方が分かりやすいかもしれません。その場合は 要件 辺りを参考にしてください。
※ webpack の設定については割愛します。

flatpickrとは

flatpickr は JavaScript で作られた、軽量で外部ライブラリ依存のない Datepickerライブラリ です。

要件

日本語化
表示フォーマット： m/d(曜日)
データ送信フォーマット： yyyy-mm-dd
カレンダー選択可能範囲：現在日～現在日の3ヵ月後末日
表示エリア：クリックした要素の下

環境

$ node -v
v8.11.2

$ yarn -v
1.7.0

ディレクトリ構成

vue-flatpickr
└── src
    ├── index.html
    └── js
        ├── components
        │   └── SearchPanelCalendar.vue
        ├── vuex
        │   ├── mutation-types.js
        │   └── store.js 
        └── app.js

準備

npm インストール

moment は、カレンダー選択可能範囲設定の日付処理部分で使用します。

$ yarn add moment vue vue-flatpickr-component vuex -S

実装

src/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Datepickerライブラリ「Vue-flatPickr」を使ってみた</title>
  </head>

  <body>
    <div id="js-SearchPanelCalendar"></div>

    <script src="js/app.js"></script>
  </body>
</html>

src/js/app.js

'use strict'

import Vue from 'vue'
import store from './vuex/store'

import SearchPanelCalendar from './components/SearchPanelCalendar.vue'

if (document.querySelectorAll('#js-SearchPanelCalendar').length) {
  /* eslint-disable no-new */
  new Vue({
    el: '#js-SearchPanelCalendar',
    components: { SearchPanelCalendar },
    template: '<SearchPanelCalendar />',
    store
  })
}

Vuex

src/js/vuex/store.js

'use strict'

import Vue from 'vue'
import Vuex from 'vuex'
import * as types from './mutation-types'

Vue.use(Vuex)

const state = {
  'searchPanelCalendarDate': null
}

const getters = {
  searchPanelCalendarDate (state) {
    return state.searchPanelCalendarDate
  }
}

const mutations = {
  [types.UPDATE_SEARCHPANELCALENDARDATE] (state, value) {
    state.searchPanelCalendarDate = value
  }
}

export default new Vuex.Store({
  state,
  getters,
  mutations
})

src/js/vuex/mutation-types.js

'use strict'

export const UPDATE_SEARCHPANELCALENDARDATE = 'UPDATE_SEARCHPANELCALENDARDATE'

コンポーネント

src/js/components/SearchPanelCalendar.vue

<template lang="pug">
  flat-pickr(
    v-model="date",
    name="date",
    placeholder="日付",
    :config="config"
  )
</template>

<script>
  'use strict'

  import * as types from '../vuex/mutation-types'

  import flatPickr from 'vue-flatpickr-component'
  import { Japanese } from 'flatpickr/dist/l10n/ja'
  import 'flatpickr/dist/flatpickr.css'

  import moment from 'moment'

  export default {
    name: 'SearchPanelCalendar',

    components: {
      flatPickr
    },

    data () {
      return {
        config: {
          locale: Japanese,
          static: true,
          altInput: true,
          altFormat: 'n/j(D)',
          minDate: 'today',
          maxDate: moment().add(2, 'months').endOf('month').format('YYYY-MM-DD')
        }
      }
    },

    computed: {
      date: {
        get () {
          return this.$store.getters.searchPanelCalendarDate
        },

        set (value) {
          this.$store.commit(types.UPDATE_SEARCHPANELCALENDARDATE, value)
        }
      }
    }
  }
</script>

まとめ

今回 flatPickr を使ってみて、シンプルで使いやすく一番のお気に入りになりました。
その他、色々と Events/Hooks/options があり良い感じです。

最後まで閲覧いただきありがとうございました！