【IVIEW】日期选择器设置默认选择时间及限制选择时间

限制选择时间

html代码

<date-picker v-model='dateSelect' placement="bottom-end" :options="options" type="daterange" placeholder="请选择时间..." style="width: 200px" split-panels></date-picker>

vue中data数据结构，设置7天内可选择

options: {
    disabledDate(date) {
        let curDate = (new Date()).getTime();
        let three = 7 * 24 * 3600 * 1000;
        let threeMonths = curDate - three;
        return date.valueOf() > Date.now() || date.valueOf() < threeMonths;
    },
},

设置当前前面的日期可选择，后面日期不可选择

options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
 },

设置默认选择时间

// 设置时间间隔为7天
setTime() {
    return [new Date(new Date(new Date().getTime() - (6 * 24 * 60 * 60 * 1000))), new Date(new Date())];
},

赋值

this.dateSelect = this.setTime(); // 设置时间间隔为7天