Custom ranges?

[OwenMelbz]

Hi Guys :)

Love the plugin so far - however our clients asked for different date ranges.

Is there a way to use a custom array of date ranges?

e.g.

1 Day, 1 Month, 1 Year ? I can see

initRanges () {
      this.ranges = [{
        text: '未来7天',
        start: new Date(),
        end: new Date(Date.now() + 3600 * 1000 * 24 * 7)
      }, {
        text: '未来30天',
        start: new Date(),
        end: new Date(Date.now() + 3600 * 1000 * 24 * 30)
      }, {
        text: '最近7天',
        start: new Date(Date.now() - 3600 * 1000 * 24 * 7),
        end: new Date()
      }, {
        text: '最近30天',
        start: new Date(Date.now() - 3600 * 1000 * 24 * 30),
        end: new Date()
      }]
      this.ranges.forEach((v, i) => {
        v.text = this.translation.pickers[i]
      })
    },

How can we overwrite these?

Thanks :)

[OwenMelbz]

For anybody else interested - this is my current solution

import DatePicker from 'vue2-datepicker';
import moment from 'moment';

DatePicker.methods.initRanges = function () {

    const today = moment.now();

    this.ranges = [
        {
            text: 'Today',
            start: today,
            end: today,
        },
        {
            text: 'Last 30 Days',
            start: moment().day(-30),
            end: today,
        },
        {
            text: 'Last 90 Days',
            start: moment().day(-90),
            end: today,
        },
        {
            text: 'Last Year',
            start: moment().day(-365),
            end: today,
        },
        {
            text: 'All Time',
            start: moment().day(-365 * 50),
            end: today,
        },
    ];
};

[mengxiong10]

Added a prop 'shortcuts'

<date-picker v-model="time2" range :shortcuts="shortcuts"></date-picker>

shortcuts: [
   {
        text: 'Today',
        start: new Date(),
        end: new Date()
    }
 ]

[OwenMelbz]

Ah @mengxiong10 this works perfectly :)

Many thanks, we have updated our project!