Vuetify DateRangePicker (obsolete since Vuetify has built-in range picker)

DateRangePicker.vue

<template>
  <v-date-picker
    class="date-range-picker" :value="value" @input="onInput"
    color="light-blue" event-color="light-blue lighten-4 date-in-range" :events="selectedRange"
    :allowed-dates="allowedDates" no-title multiple
  >
    <slot></slot>
  </v-date-picker>
</template>

<script>
import moment from 'moment'

export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    allowedDates: Function
  },
  data () {
    return {
      dates: []
    }
  },
  created () {
    this.dates = this.value
  },
  watch: {
    value (val) {
      this.dates = val
    }
  },
  methods: {
    diff (a, b) {
      return a.filter(v => !b.includes(v))
    },
    onInput (val) {
      let newRange
      if (val.length > 2) {
        let newDate = this.diff(val, this.dates)[0]
        let currentRange = this.dates.sort()
        newRange = [currentRange[0], newDate]
      } else {
        newRange = val
      }
      this.dates = newRange.sort()
      this.$emit('input', this.dates)
    },
    selectedRange (date) {
      if (this.dates.length == 2) {
        return moment(date).isBetween(...this.dates)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.date-range-picker
  >>> .v-date-picker-table__events
    height 32px
    width 32px
    z-index 0
    left -2px
    top -1px
  >>> .date-in-range
    height 32px
    width 32px
  >>> .v-btn__content
    z-index 1
</style>

example.vue

<template>
  <v-menu
    ref="menu" v-model="menu" :close-on-content-click="false" :nudge-right="30"
    lazy transition="scale-transition" offset-y full-width min-width="290px"
  >
    <v-text-field slot="activator" :value="formattedRange" readonly></v-text-field>
    <date-range-picker v-model="dateRange">
      <v-spacer></v-spacer>
      <v-btn @click="menu = false" color="primary" flat>OK</v-btn>
    </date-range-picker>
  </v-menu>
</template>

<script>
import moment from 'moment'
import DateRangePicker from './DateRangePicker'

export default {
  components: { DateRangePicker },
  data () {
    return {
      dateRange: [],
      menu: false
    }
  },
  computed: {
    formattedRange () {
      if (this.dateRange.length) {
        let range = moment(this.dateRange[0]).format('D MMM')
        if (this.dateRange[1]) {
          range += ' - ' + moment(this.dateRange[1]).format('D MMM')
        }
        return range
      }
    }
  }
}
</script>

Thanks that's perfect for me !

example.vue#30 it should be if (this. dateRange[1]) {

I've added range highlighter in this codepen https://codepen.io/chansv/pen/OJVWBbG?editors=0010

@Chandrasekarone it's totally cool. Thanks