封装日期选择器组件，带有上周，下周按钮

ui图

组件代码如下：

html 复制代码

<template>
  <div>
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      align="right"
      size="mini"
      :editable="false"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
      format="yyyy-MM-dd"
      @change="handleDateChange"
      :readonly="true"
    >
    </el-date-picker>
    <el-button-group>
      <el-button size="mini" @click="prevWeek" style="margin-right: 5px;">上一周</el-button>
      <el-button size="mini" @click="nextWeek">下一周</el-button>
    </el-button-group>
  </div>
</template>

<script>
export default {
  name: 'DateRangePicker',
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dateRange: this.value.length ? [...this.value] : this.getDefaultWeekRange(),
    };
  },
  watch: {
    value(newVal) {
      if (newVal.length) {
        this.dateRange = [...newVal];
      }
    }
  },
  methods: {
    getDefaultWeekRange() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
      return [start, end];
    },
    handleDateChange(val) {
      if (val && val.length === 2) {
        const formattedVal = [
          this.formatDate(val[0]),
          this.formatDate(val[1])
        ];
        this.$emit('input', formattedVal);
        this.$emit('change', formattedVal);
      } else {
        this.$emit('input', val);
        this.$emit('change', val);
      }
    },
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    prevWeek() {
      const [start, end] = this.dateRange;
      const newStart = new Date(start);
      const newEnd = new Date(end);
      newStart.setDate(newStart.getDate() - 7);
      newEnd.setDate(newEnd.getDate() - 7);
      this.dateRange = [newStart, newEnd];
      this.handleDateChange(this.dateRange);
    },
    nextWeek() {
      const [start, end] = this.dateRange;
      const newStart = new Date(start);
      const newEnd = new Date(end);
      newStart.setDate(newStart.getDate() + 7);
      newEnd.setDate(newEnd.getDate() + 7);
      this.dateRange = [newStart, newEnd];
      this.handleDateChange(this.dateRange);
    }
  }
};
</script>

<style scoped>
.date-range-picker {
  display: flex;
  align-items: center;
}
.el-button-group {
  margin-left: 10px;
}
</style>

如何调用组件

html 复制代码

<template>
  <date-range-picker v-model="dateRange" @change="handleDateChange" />
</template>

<script>
import DateRangePicker from '@/views/components/DateRangePicker.vue';

export default {
  components: { DateRangePicker },
  data() {
    return {
      dateRange: []
    };
  },
  methods: {
    handleDateChange(range) {
      console.log('日期范围变化:', range);
    }
  }
};
</script>

打印结果如下