vue-daterangepicker demo

You should add basic stylesheet first, for focus (such as orange) and active (such as blue) items.

.drp .drp-day-number.focus {color: #fff; background-color: #ed5434;}
.drp .drp-day-number.active {color: #fff; background-color: #8cace2;}

You should init the VueDateRangePicker (with a prefix), and set initial props && methods

VueDateRangePicker(Vue, 'v');
new Vue({el: '#el',data: {
  moment: moment,
  range1: moment.range(['2015-10-01 23:33', '2015-10-04']),
  range2: moment.range(['2015-10-03', '2015-10-07']),
  date: moment()
}, methods: {
  onSelect1: function(date) {this.$els.singlevalue.innerHTML = date.format('YYYY-MM-DD HH:mm');},
  setSingleTime: function() {this.date = moment();},
  clearSingleTime: function() {this.date = null;}
}});

date-single-picker

<v-daterangepicker
  v-ref="drpsingle"
  lang="zh-cn"
  :number-of-calendars="1"
  :calendar-type.sync="ctype"
  type="single"
  :time="true"
  :date="date"
  :max-date.sync="maxDate"
  :on-select="onSelect1"
  :shortcuts="{el: 'shortcuts'}",
  :dimension="{el: 'dimension'}",
></v-daterangepicker>

date-range-picker

<v-daterangepicker
  v-ref="drprange"
  lang="en"
  :number-of-calendars="2"
  calendar-type="month"
  type="range"
  :time="true"
  :range="range1"
  :max-date="moment()"
  :on-select="onSelect2"
></v-daterangepicker>

date-terminal-picker

<v-daterangepicker
  v-ref:drpterminal
  lang="ja"
  :number-of-calendars="3"
  type="terminal"
  :time="true"
  :range="range2"
  :max-date="moment()"
  @on-select="onSelect3"
></v-daterangepicker>