el-select选择el-date-picker日期范围

效果

1.template中

 <el-form-item>
     <el-select      v-model="value"   @change="togglesele"    clearable   size="mini"   placeholder="请选择"   >
            <el-option    v-for="item in options"  :key="item.value"     :label="item.label"  :value="item.value"   >
           </el-option>
     </el-select>
 </el-form-item>
 <el-form-item label="时间检索" label-width="100px">
    <el-date-picker  :clearable="true"   value-format="yyyy-MM-dd"    @change="datesele"   size="mini"   v-model="value1"    type="daterange"   start-placeholder="请选择开始时间"    end-placeholder="请选择结束时间"  >
    </el-date-picker>
 </el-form-item>

2.data中

options: [
        {
          value: "选项1",
          label: "今日",
        },
        {
          value: "选项2",
          label: "本周",
        },
        {
          value: "选项3",
          label: "本月",
        },
        {
          value: "选项4",
          label: "本季度",
        },
        {
          value: "选项5",
          label: "本年",
        },
      ],
      value: "",
      value1: "",

3.method中

// 用到格式化日期js
togglesele(value) {
      if (value == "选项1") {
        this.value1 = [date.now, date.now];
        this.formInline.startDate = this.value1[0];
        this.formInline.endDate = this.value1[1];
      } else if (value == "选项2") {
        this.value1 = [date.getWeekStartDate(), date.getWeekEndDate()];
        this.formInline.startDate = this.value1[0];
        this.formInline.endDate = this.value1[1];
      } else if (value == "选项3") {
        this.value1 = [date.getMonthStartDate(), date.getMonthEndDate()];
        this.formInline.startDate = this.value1[0];
        this.formInline.endDate = this.value1[1];
      } else if (value == "选项4") {
        this.value1 = [date.getQuarterStartDate(), date.getQuarterEndDate()];
        this.formInline.startDate = this.value1[0];
        this.formInline.endDate = this.value1[1];
      } else if (value == "选项5") {
        this.value1 = [date.nowYear + "-01-01", date.nowYear + "-12-31"];
        this.formInline.startDate = this.value1[0];
        this.formInline.endDate = this.value1[1];
      } else {
        this.value1 = "";
        this.formInline.startDate = "";
        this.formInline.endDate = "";
      }
      this.getData();
    },

新建格式化日期date.js
在使用的页面中引入

import date from "@/utils/date";

/**
 * 获取本周、本季度、本月、上月的开始日期、结束日期
 */
var now = new Date(); //当前日期 
var nowDayOfWeek = now.getDay(); //今天本周的第几天 
var nowDay = now.getDate(); //当前日 
var nowMonth = now.getMonth(); //当前月 
var nowYear = now.getYear(); //当前年 	
nowYear += (nowYear < 2000) ? 1900 : 0; //

var lastMonthDate = new Date(); //上月日期
lastMonthDate.setDate(1);
lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
var lastYear = lastMonthDate.getYear();
var lastMonth = lastMonthDate.getMonth();

//格式化日期：yyyy-MM-dd 
function formatDate(date) {
    var myyear = date.getFullYear();
    var mymonth = date.getMonth() + 1;
    var myweekday = date.getDate();

    if (mymonth < 10) {
        mymonth = "0" + mymonth;
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday;
    }
    return (myyear + "-" + mymonth + "-" + myweekday);
}

//获得某月的天数 
function getMonthDays(myMonth) {
    var monthStartDate = new Date(nowYear, myMonth, 1);
    var monthEndDate = new Date(nowYear, myMonth + 1, 1);
    var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
    return days;
}

//获得本季度的开始月份 
function getQuarterStartMonth() {
    var quarterStartMonth = 0;
    if (nowMonth < 3) {
        quarterStartMonth = 0;
    }
    if (2 < nowMonth && nowMonth < 6) {
        quarterStartMonth = 3;
    }
    if (5 < nowMonth && nowMonth < 9) {
        quarterStartMonth = 6;
    }
    if (nowMonth > 8) {
        quarterStartMonth = 9;
    }
    return quarterStartMonth;
}

//获得本周的开始日期 
function getWeekStartDate() {
    var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
    return formatDate(weekStartDate);
}

//获得本周的结束日期 
function getWeekEndDate() {
    var weekEndDate = new Date(nowYear, nowMonth, nowDay + (6 - nowDayOfWeek));
    return formatDate(weekEndDate);
}

//获得本月的开始日期 
function getMonthStartDate() {
    var monthStartDate = new Date(nowYear, nowMonth, 1);
    return formatDate(monthStartDate);
}

//获得本月的结束日期 
function getMonthEndDate() {
    var monthEndDate = new Date(nowYear, nowMonth, getMonthDays(nowMonth));
    return formatDate(monthEndDate);
}

//获得上月开始时间
function getLastMonthStartDate() {
    var lastMonthStartDate = new Date(nowYear, lastMonth, 1);
    return formatDate(lastMonthStartDate);
}

//获得上月结束时间
function getLastMonthEndDate() {
    var lastMonthEndDate = new Date(nowYear, lastMonth, getMonthDays(lastMonth));
    return formatDate(lastMonthEndDate);
}

//获得本季度的开始日期 
function getQuarterStartDate() {

    var quarterStartDate = new Date(nowYear, getQuarterStartMonth(), 1);
    return formatDate(quarterStartDate);
}

//或的本季度的结束日期 
function getQuarterEndDate() {
    var quarterEndMonth = getQuarterStartMonth() + 2;
    var quarterStartDate = new Date(nowYear, quarterEndMonth, getMonthDays(quarterEndMonth));
    return formatDate(quarterStartDate);
}

export default {
    getWeekStartDate,
    getWeekEndDate,
    getMonthStartDate,
    getMonthEndDate,
    getQuarterStartDate,
    getQuarterEndDate,
    nowYear,
    now: formatDate(now)
}