Datepickerライブラリ「Vue-flatPickr」を使ってみた

# はじめに
Datepickerライブラリ [Vue-flatPickr](https://github.com/ankurk91/vue-flatpickr-component) の導入メモです。
※ `Vuex` が必要がないときは [README](https://github.com/ankurk91/vue-flatpickr-component) の方が分かりやすいかもしれません。その場合は `要件` 辺りを参考にしてください。
※ `webpack` の設定については割愛します。

# flatpickrとは
[flatpickr](https://flatpickr.js.org/) は JavaScript で作られた、軽量で外部ライブラリ依存のない `Datepickerライブラリ` です。

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

# 環境
```sh
$ node -v
v8.11.2

$ yarn -v
1.7.0
```

# ディレクトリ構成
```sh
vue-flatpickr
└── src
    ├── index.html
    └── js
        ├── components
        │   └── SearchPanelCalendar.vue
        ├── vuex
        │   ├── mutation-types.js
        │   └── store.js 
        └── app.js
```

# 準備
### npm インストール
`moment` は、カレンダー選択可能範囲設定の日付処理部分で使用します。

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

# 実装
```html: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>
```

```js: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
```js: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
})
```

```js:src/js/vuex/mutation-types.js
'use strict'

export const UPDATE_SEARCHPANELCALENDARDATE = 'UPDATE_SEARCHPANELCALENDARDATE'
```

### コンポーネント
```html: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/](https://flatpickr.js.org/events/)[options](https://flatpickr.js.org/options/) があり良い感じです。

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