はじめに
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 があり良い感じです。
最後まで閲覧いただきありがとうございました！