emis-frontend/src/components/DatePickerAdv/elDateAdvPicker.vue

<template>
  <div class="date-box">
    <!-- range-separator="-" -->
    <el-date-picker
         v-show="true"
        v-model="datetimeRange"
        type="datetimerange"

        start-placeholder="开始日期"
        end-placeholder="结束日期"
        ref="timeRangePicker"
        :picker-options="pickerOptions"
        @change="dateTimeChange"
        width="100%"
      >
      </el-date-picker>
  </div>

</template>
<script>
export default {
  name: "elDateAdvPicker",
  model: {
      prop: 'value',
      event: 'dateTimeChange'
  },
  props: {
      value: {
        type: [String,Array],
        required: false
      },
  },
	data() {
		return {
      selectType: '1', // 时间选择器当前选择
      datetimeRange: [],
      pickerOptions: {
        shortcuts: [
           {
            text: '今天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setHours(0,0,0,0)
              end.setHours(23,59,59,0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
              start.setHours(0,0,0,0)
              end.setHours(23,59,59,0)
              picker.$emit('pick', [start, end])
            }
          },

          {
            text: "本月",
            onClick(picker) {

              const end = getCurrentMonthLast()
              const start = getCurrentMonthFirst()
              start.setHours(0,0,0,0)
              end.setHours(23,59,59,0)
              picker.$emit("pick", [start, end]);

               function getCurrentMonthFirst() {
                var date = new Date()
                console.log(date)
                date.setDate(1)
                return date
              }
              // 获取当前月的最后一天
              function getCurrentMonthLast() {
                var date = new Date()
                var currentMonth = date.getMonth()
                var nextMonth = ++currentMonth
                var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
                var oneDay = 1000 * 60 * 60 * 24
                return new Date(nextMonthFirstDay - oneDay)
              }
            },
          },
          {
            text: "上月",
            onClick(picker) {
              const end = gettimeEnd()
              const start = gettimeStart()
              start.setHours(0,0,0,0)
              end.setHours(23,59,59,0)
              picker.$emit("pick", [start, end]);
              function gettimeStart() {
                const nowdays = new Date()
                let year = nowdays.getFullYear()
                let month = nowdays.getMonth()
                if (month === 0) {
                  month = 12
                  year = year - 1
                }
                if (month < 10) {
                  month = '0' + month
                }
                let firstDayOfPreMonth = year + '-' + month + '-' + '01'
                firstDayOfPreMonth = firstDayOfPreMonth.toString()
                return new Date(firstDayOfPreMonth)
              }
              function gettimeEnd() {
                const nowdays = new Date()
                let year = nowdays.getFullYear()
                let month = nowdays.getMonth()
                if (month === 0) {
                  month = 12
                  year = year - 1
                }
                if (month < 10) {
                  month = '0' + month
                }
                const lastDay = new Date(year, month, 0)
                let lastDayOfPreMonth = year + '-' + month + '-' + lastDay.getDate()
                lastDayOfPreMonth = lastDayOfPreMonth.toString()
                return new Date(lastDayOfPreMonth)
              }
            },
          },
          {
            text: "最近3天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              start.setHours(0,0,0,0)
              end.setHours(23,59,59,0)
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              start.setHours(0,0,0,0)
              end.setHours(23,59,59,0)
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      }
		}
	},
  watch: {
      value(newVal) {
        this.datetimeRange = newVal;
      },
      datetimeRange(newVal, oldVal) {
        this.$emit("input", this.datetimeRange);
      }
  },
	methods: {
		dateTimeChange(value) {
      this.$emit("input", this.datetimeRange);
      this.$emit('dateTimeChange', value)
		},
	}
}
</script>


<style lang="scss" scoped>
.date-box >>> .el-date-editor.el-input,.el-date-editor.el-input__inner {
  width: 146px;
  margin: 0 10px;
}
.date-input >>> .el-input__inner {
  width: 146px;
  height: 40px;
}

</style>