常用的时间处理组件

平时常用的时间

• 今天
• 昨天
• 本周
• 最近7天
• 最近30天
• 自定义

封装组件，并对时间进行处理

代码如下

<template>
  <div class="search-time">
    <el-select v-model="type" class="search-width">
      <el-option
        v-for="item in timeArray"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-date-picker
      style="z-index:2;"
      v-if="type === 'Custom'"
      class="search-date"
      v-model="period"
      type="datetimerange"
      :picker-options="pickerOptions"
      :clearable="false"
    />
  </div>
</template>
<script>
import moment from 'moment';
export default {
  model: {
    prop: 'date',
    event: 'change'
  },
  props: {
    date: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    const date = [
      new Date().getFullYear(),
      new Date().getMonth(),
      new Date().getDate()
    ];
    return {
      pickerMinDate: null,
      pickerRange: 3600 * 1000 * 24 * 30, // 可选择日期范围
      pickerOptions: {
        firstDayOfWeek: +sessionStorage.getItem("weekFirstDay"), //周第一天
        onPick: ({ maxDate, minDate }) => {
          console.log(maxDate, minDate);
          this.pickerMinDate = minDate.getTime();
        },
        disabledDate: (time) => {
          if (this.pickerMinDate) {
            return time.getTime() > new Date(moment(new Date()).endOf('day')).getTime() || ((time.getTime() > (this.pickerMinDate + this.pickerRange)) || (time.getTime() < (this.pickerMinDate - this.pickerRange)));
          }
          return time.getTime() > new Date(moment(new Date()).endOf('day')).getTime();
        }
      },
      type: this.date?.type ?? 'Today',
      timeArray: [
        {"value": "Today", "label": this.$t('btn_today')},
        {"value": "Yesterday", "label": this.$t('yesterday')},
        {"value": "CurrentWeek", "label": this.$t('currentWeek')},
        {"value": "7d", "label": this.$t('last7Days')},
        {"value": "30d", "label": this.$t('last30Days')},
        {"value": "Custom", "label": this.$t('custom_time_interval')}
      ],
      period: [
        new Date(
          ...date,
          0,
          0,
          0
        ),
        new Date(
          ...date,
          23,
          59,
          59
        )
      ]
    };
  },
  watch: {
    date() {
      this.type = this.date?.type ?? 'Today';
      this.period = this.date?.period ?? this.period;
    }
  },
  mounted () {
    this.updateMoment();
  },
  methods: {
    disabledDate(time) {
      // let timeStart = new Date(moment(this.minDate).startOf('day'));
      // let timeEnd = new Date(moment(this.minDate).endOf('day'));
      if (this.minDate) {
        let range = 30 * 24 * 3600 * 1000;
        return time.getTime() > new Date(moment(new Date()).endOf('day')).getTime() || time.getTime() > (this.minDate.getTime() + range) || time.getTime() < (this.minDate.getTime() - range);
      }
      return time.getTime() > new Date(moment(new Date()).endOf('day')).getTime();
    },
    updateMoment() {
      moment.updateLocale("en", {
        week: {
          dow: +sessionStorage.getItem("weekFirstDay")
        }
      });
    },
    setTime(data) {
      if (data.time) {
        this.type = 'Custom';
        this.period = [new Date(data.time[0]), new Date(data.time[1])];
      } else {
        this.type = data.timeType ?? 'oneHour';
        const calculateTime = this.calculateTime();
        this.period = [new Date(calculateTime.BeginTime), new Date(calculateTime.EndTime)];
      }
    },
    calculateTime() {
      let BeginTime;
      let EndTime;
      let utcBeginTime;
      let utcEndTime;
      switch (this.type) {
        case 'oneHour':
          BeginTime = moment().subtract(1, 'hours').format();
          EndTime = moment().format();
          utcBeginTime = moment().subtract(1, 'hours').utc().format();
          utcEndTime = moment().utc().format();
          break;
        case 'Today':
          BeginTime = moment().startOf('day').format();
          EndTime = moment().endOf('day').format();
          utcBeginTime = moment().startOf('day').utc().format();
          utcEndTime = moment().endOf('day').utc().format();
          break;
        case 'Yesterday':
          BeginTime = moment().subtract(1, 'days').startOf('day').format();
          EndTime = moment().subtract(1, 'days').endOf('day').format();
          utcBeginTime = moment().subtract(1, 'days').startOf('day').utc().format();
          utcEndTime = moment().subtract(1, 'days').endOf('day').utc().format();
          break;
        case 'CurrentWeek':
          BeginTime = moment().startOf('week').format();
          EndTime = moment().endOf('week').format();
          utcBeginTime = moment().startOf('week').utc().format();
          utcEndTime = moment().endOf('week').utc().format();
          break;
        case '7d':
          BeginTime = moment().subtract(6, 'days').startOf('day').format();
          EndTime = moment().endOf('day').format();
          utcBeginTime = moment().subtract(6, 'days').startOf('day').utc().format();
          utcEndTime = moment().endOf('day').utc().format();
          break;
        case '30d':
          BeginTime = moment().subtract(29, 'days').startOf('day').format();
          EndTime = moment().endOf('day').format();
          utcBeginTime = moment().subtract(29, 'days').startOf('day').utc().format();
          utcEndTime = moment().endOf('day').utc().format();
          break;
        case 'Custom':
          BeginTime = moment(this.period[0]).format();
          EndTime = moment(this.period[1]).format();
          utcBeginTime = moment(this.period[0]).utc().format();
          utcEndTime = moment(this.period[1]).utc().format();
          break;
        default:
          return;
      }
      return {
        BeginTime,
        EndTime,
        utcBeginTime,
        utcEndTime
      };
    },
    getTime() {
      return this.calculateTime();
    }
  }
};
</script>
<style lang="scss" scoped>
  .search-width{
    width: 100%;
  }
  .search-time{
    width: 100%;
    position: relative;
    .search-date{
			z-index:20;
      width: calc(100% - 32px);
      position: absolute;
      top: 0;
      left: 0;
    }
  }
</style>