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

<template>
 <div class="date-box">
    <el-date-picker
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        v-model="dateRange"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        ref="timeRangePicker"
        :picker-options="pickerOptions"
        @change="dateChange"
        style="width: 100%;"
      >
      </el-date-picker>
  </div>
</template>

<script>
import {timeFormat} from '@/utils/dateUtils'

export default {
  name: "ElDateAdvPicker",
  props: {
    value:{
      type:Array
    }
  },
  data() {
    return {
      selectType: '1', // 时间选择器当前选择
      dateRange: this.value,
      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 * 6);
              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.dateRange = this.value;
        if(this.dateRange&&this.dateRange.length==2){
          this.dateRange[0]=timeFormat(this.dateRange[0]);
          this.dateRange[1]=timeFormat(this.dateRange[1]);
        }
      },
  },
  created() {
  },
  methods: {
    dateChange(value) {
      if(this.dateRange&&this.dateRange.length==2){
        this.dateRange[0]=timeFormat(this.dateRange[0]);
        this.dateRange[1]=timeFormat(this.dateRange[1]);
      }
      this.$emit("input", this.dateRange);
      this.$emit('dateTimeChange', this.dateRange)
		},

  }
}
</script>

<style lang="scss" scoped>
.datetimepicker {
  width: 300px;
  .el-select .el-input__inner {
    border-radius: 4px 0 0 4px;
  }
  .el-date-editor .el-input__inner {
    border-left: none;
    border-radius: 0 4px 4px 0;
  }
}
</style>