vue.js vu-daterange-pickerで日付範囲を選択出来るようにする。

インストール

npm install vue-daterange-picker --save

※ momentとvue-clickawayに依存します。

例：一年前から昨日までの日付を選択できるpicker

対象version 1.2.5

script

import moment from 'moment'
import VueDaterangePicker from 'vue-daterange-picker'

moment.locale('ja') //曜日や月名を日本語化

export default {
  name: 'コンポーネント名',
  components: {
    VueDaterangePicker
  },
  data () {
    return {
      oneYearAgo: moment().subtract(365, 'days').format('YYYY/MM/DD'),
      yesterday: moment().subtract(1, 'days').format('YYYY/MM/DD')
    }
  },
  methods: {
    getDates: (dates) => {
      console.log(dates) // Object {startDate: "2017-12-25T00:00:00+09:00", endDate: "2018-01-22T00:00:00+09:00"}
      // 取得した日付をイベントに渡す
    }
  }
}

template

<template>
  <vue-daterange-picker
    double // カレンダーを2列表示にする デフォルトは1列
    dates-format="YYYY/MM/DD" // start-date, end-dateに渡す日付の書式
    format="YYYY/MM/DD" // 出力される日付の書式
    titleFormat="YYYY年 M月" // カレンダーの上部に表示される書式 デフォルト MMMM Y
    :start-date="oneYearAgo" // カレンダーの選択可能な開始日付
    :end-date="yesterday" // カレンダーの選択可能な終了日付
    start-place-holder="" // 開始日付のプレースホルダ ※公式ではstart-place-holdersと誤記
    end-place-holder="" //  終了日付のプレースホルダ ※公式ではend-place-holdersと誤記
    @get-dates="getDates" // 期間選択完了時に発火されるイベント
  />
</template>

カスタマイズ

デフォルトではjQueryおなじみのdatepickerのようにカレンダーアイコンをクリックではカレンダーが開かない。
アイコンクリックでカレンダーが開くようにするカスタマイズの例。

vue-daterange-picker.vue

// handleEndDateClick() の後ろに追加
      handleCalendarIconClick() {
        this.dateToInput = 'start';
        this.$refs.pointer.style.left = '90px';
        this.$refs.startDateInput.select();      
        this.showCalendar = true;
      },

// アイコンにクリックイベントを追加する。
      <img src="./assets/calendar.svg" class="calendar" alt="calendar" @click.stop="handleCalendarIconClick">

用途

一定期間のデータを抽出する用途のUIに便利です。