vue.jsで自由に扱えるDatepicker【vue-flatpickr-component】

2つのDatepickerで日付の差分を見て、入力フィールドを増減させるフォームが作れたので、その一部を紹介していきます。

今回紹介する仕様

  • vuejsであつけるDatepicke
  • 2つの日付が入力された場合差分を計算
  • 差分でいろいろやってみる

利用するパッケージ

  • vue.js
  • bootstrap(cssのみ)
  • vue-flatpickr-component
  • moment.js

vue-flatpickr-componentでDatepickerを作成し、選択された日付はmoment.jsで差分を計算します。

入力フォームのフィールドや、inputタグはvue.jsで増減させます。

vue-flatpickr-componentの設定

タスクランナーはlaravel mix(webpack)で、パッケージはバンドルします。

window.Vue = require('vue')

//flatPickr
const flatPickr = require('vue-flatpickr-component')
require('flatpickr/dist/flatpickr.css')

vue-flatpickr-componentについて詳しくはこちらを御覧ください。
https://www.npmjs.com/package/vue-flatpickr-component?activeTab=readme

html

<div id="app">
    <flat-pickr
        v-model="date"
    ></flat-pickr>
</div>

js

const app = new Vue({
    el: '#app',
    data: {
        date: null
    },
    components: {
        flatPickr
    },
})

v-modelだけ設定すれば、Datepickerを表示できるようになります。

日付の差分を計算

2つのDatepickerを用意して、日付を変更した時に実行される関数を設定します。

差分の計算はmoment.jsを利用します。

@on-changeで変更時のイベントを設定し、change_dateにはどっちのDatepickerが変更されたかの種類と、変更された値を引数に設定します。

html

<div id="app">
    <flat-pickr
        v-model="start"
        @on-change="change_date('start', $event)"
    ></flat-pickr>
    <flat-pickr
        v-model="end"
        @on-change="change_date('end', $event)"
    ></flat-pickr>
</div>

js

window.Vue = require('vue')

//flatPickr
const flatPickr = require('vue-flatpickr-component')
require('flatpickr/dist/flatpickr.css')

//moment.js
const moment = require("moment");

//インスタンス
const app = new Vue({
    el: '#app',
    data: {
        start: null,
        end: null,
    },
    components: {
        flatPickr
    },
    methods: {
        change_date: function (type, e) {

            //それぞれのdataに渡す
            let date = moment(e[0]).format('YYYY-MM-DD')
            if (type == 'start') {
                this.start = date
            } else {
                this.end = date
            }

            //差分の計算
            let period = moment(this.end).diff(moment(this.start), 'days')
            console.log(period);
        }
    }
})

差分を使って複雑なフォームの出力操作

ここまで取得できれば、コンポーネントを入れ子にしたり複雑な処理ができる入力フォームのフィールドを作成することができます。

作成したものはこちら。
https://github.com/kmtitmk-ux/vue-form/tree/feature/vue-form-2

正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。

詳しくはこちら