vue3日期选择器的封装

/**
 * 根据时间筛选
 */
const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const currentDate = new Date();
let previousYear = currentDate.getFullYear();
let previousMonth = currentDate.getMonth() - 1;
if (previousMonth < 0) {
  previousMonth = 11;
  previousYear--;
}
const monthAgoDate = new Date(previousYear, previousMonth, currentDate.getDate());
const monthAgoYear = monthAgoDate.getFullYear();
const monthAgoMonth = String(monthAgoDate.getMonth() + 1).padStart(2, "0");
const startTime = `${monthAgoYear}-${monthAgoMonth}-${day}`;

const DateRange:any = ref([
  startTime + " 00:00:00",
  new Date().toISOString().substring(0, 10) + " 00:00:00",
]);

const shortcuts = [
  {
    text: "一周内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "一月内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "三月内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];


          <el-date-picker
            v-model="DateRange"
            type="daterange"
            range-separator="—"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="shortcuts"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleList()"
          />