element 自定义 本日 本周 本月 本年 昨日 两种方法

1：

通过pickerOptionstime实现

 

<template>
  <div>
    <el-form
      class="myForm"
      :inline="true"
      :model="tableParam"
      label-position="right"
      size="small"
      :label-width="width"
    >
      <el-form-item :label="title">
        <el-date-picker
          v-model="value1"
          type="daterange"
          align="right"
          @change="timeclick"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptionstime"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    timeConb: null,
    title: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "80px",
    },
  },
  data() {
    return {
      value1: "",
      pickerOptionstime: {
        shortcuts: [
          {
            text: "昨日",
            onClick(picker) {
              let endday =
                new Date(new Date().toLocaleDateString()).getTime() - 86400000;
              picker.$emit("pick", [endday, endday]);
            },
          },
          {
            text: "本周",
            onClick(picker) {
              let daytime =
                new Date().getTime() -
                new Date(new Date().toLocaleDateString()).getTime();
              var startStop = new Array();
              //一天的毫秒数
              var millisecond = 1000 * 60 * 60 * 24;
              //获取当前时间
              var currentDate = new Date();
              //相对于当前日期AddWeekCount个周的日期
              currentDate = new Date(
                currentDate.getTime() + millisecond * 7 * 0
              );
              //返回date是一周中的某一天
              var week = currentDate.getDay();
              //返回date是一个月中的某一天
              var month = currentDate.getDate();
              //减去的天数
              var minusDay = week != 0 ? week - 1 : 6;
              //获得当前周的第一天
              var currentWeekFirstDay = new Date(
                currentDate.getTime() - millisecond * minusDay
              );
              //获得当前周的最后一天
              var currentWeekLastDay = new Date(
                currentWeekFirstDay.getTime() + millisecond * 6
              );

              let start = currentWeekFirstDay.getTime() - daytime;
              let endday = currentWeekLastDay.getTime() - daytime + 86399999;
              picker.$emit("pick", [start, endday]);
            },
          },
          {
            text: "本月",
            onClick(picker) {
              //起止日期数组
              var startStop = new Array();
              //获取当前时间
              var currentDate = new Date();
              var month = currentDate.getMonth() + 0;
              if (month < 0) {
                var n = parseInt(-month / 12);
                month += n * 12;
                currentDate.setFullYear(currentDate.getFullYear() - n);
              }
              currentDate = new Date(currentDate.setMonth(month));
              //获得当前月份0-11
              var currentMonth = currentDate.getMonth();
              //获得当前年份4位年
              var currentYear = currentDate.getFullYear();
              //获得上一个月的第一天
              var currentMonthFirstDay = new Date(currentYear, currentMonth, 1);
              //获得上一月的最后一天
              var currentMonthLastDay = new Date(
                currentYear,
                currentMonth + 1,
                0
              );
              this.purchaseDate = [];
              let start = currentMonthFirstDay.getTime();
              let end = currentMonthLastDay.getTime() + 86399999;
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "本年",
            onClick(picker) {
              var now = new Date();
              var now_year = now.getFullYear();
              var YearStart = new Date(now_year, 0, 1);
              var YearEnd = new Date(
                new Date(now_year + 1, 1, 1).getTime() - 1000 * 60 * 60 * 24
              );
              this.purchaseDate = [];
              let start = YearStart.getTime();
              let end = YearEnd.getTime() - 2592000000 - 1;
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      timeStatuss: "",
      timeStatus: 4,
      tableParam: {
      },
    };
  },
  computed: {},
  methods: {
    timeclick() {
      this.$emit("timeConb", this.value1);
    },
    cleartime() {
      this.timeStatus = 4;
      this.value1=''
    },
    tiemclick2() {
      this.timeStatus = 6;
    },
  },
  activated() {
  },
  mounted() {},
};
</script>
<style scoped>
</style>

2：

与上类似的

两份代码上传资源