为elementui的el-date-picker时间选择器添加快捷选项

1、效果图

2、实现方法

直接在elementui的时间选择器上修改，添加shorcuts选项，但是样式要自己修改。

有几个注意点：

1）如图我是选中后有显示背景颜色的，也就意味着要给选中的选项添加类名，elementui没有这个功能，需要我们自己实现。

2）选中时间后，给对应的快捷选项也选中。比如我在时间选择器中选择了近7天，那么对应快捷选项也要选中。

3、代码

shortCuts：

javascript 复制代码

 shortcuts: [
        {
            text: "今日",
            onClick(picker) {
                const [start, end] = getToday();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "昨日",
            onClick(picker) {
                const [start, end] = getYesterday();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "本周",
            onClick(picker) {
                const [start, end] = getWeek();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "上周",
            onClick(picker) {
                const [start, end] = getLastWeek();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "本月",
            onClick(picker) {
                const [start, end] = getMonth();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "上月",
            onClick(picker) {
                const [start, end] = getLastMonth();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "近7天",
            onClick(picker) {
                const [start, end] = getPassedSeven();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "近14天",
            onClick(picker) {
                const [start, end] = getPassedFourteen();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "近30天",
            onClick(picker) {
                const [start, end] = getPassedThirty();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "近60天",
            onClick(picker) {
                const [start, end] = getPassedSixty();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "近90天",
            onClick(picker) {
                const [start, end] = getPassedNinety();
                picker.$emit("pick", [start, end]);
            },
        },
    ]

获取各个时间的函数：

javascript 复制代码

export function getToday() {
    const start = new Date();
    start.setHours(0, 0, 0, 0);
    const end = new Date();
    end.setHours(23, 59, 59, 0);
    return [start, end];
}

export function getYesterday() {
    const start = new Date();
    start.setDate(start.getDate() - 1);
    start.setHours(0, 0, 0, 0); 
    const end = new Date();
    end.setDate(end.getDate() - 1);
    end.setHours(23, 59, 59, 0); 
    return [start, end];
}

export function getWeek() {
    const start = new Date();
    const end = new Date();
    end.setHours(23, 59, 59, 0);
    const dayOfWeek = start.getDay() || 7;
    start.setDate(start.getDate() - dayOfWeek + 1);
    start.setHours(0, 0, 0, 0);
    return [start, end];
}

export function getLastWeek() {
    const start = new Date();
    start.setDate(start.getDate() - 6 - (start.getDay() || 7));
    start.setHours(0, 0, 0, 0);

    const end = new Date(start);
    end.setDate(start.getDate() + 6); // 获取本周的最后一天
    end.setHours(23, 59, 59, 0);
    return [start, end];
}

export function getMonth() {
    const start = new Date();
    start.setDate(1); 
    start.setHours(0, 0, 0, 0);
    const end = new Date(); 
    end.setHours(23, 59, 59, 0); 
    return [start, end];
}

export function getPassedSeven() {
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
    start.setHours(0, 0, 0, 0); 
    const end = new Date();
    end.setHours(23, 59, 59, 0); 
    return [start, end];
}

export function getPassedFourteen() {
    const start = new Date();
    start.setHours(0, 0, 0, 0);
    const end = new Date();
    end.setHours(23, 59, 59, 0);
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 13);
    return [start, end];
}

export function getPassedThirty() {
    const end = new Date();
    end.setHours(23, 59, 59, 0);
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
    start.setHours(0, 0, 0, 0); 
    return [start, end];
}

export function getPassedSixty() {
    const end = new Date();
    end.setHours(23, 59, 59, 0);
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 59);
    start.setHours(0, 0, 0, 0);
    return [start, end];
}

export function getPassedNinety() {
    const end = new Date();
    end.setHours(23, 59, 59, 0); 
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 89);
    start.setHours(0, 0, 0, 0);
    return [start, end];
}

export function getLastMonth() {
    const today = new Date();
    const lastMonth = new Date(
        today.getFullYear(),
        today.getMonth() - 1,
        1
    );
    const firstDay = new Date(
        lastMonth.getFullYear(),
        lastMonth.getMonth(),
        1
    );
    const lastDay = new Date(
        lastMonth.getFullYear(),
        lastMonth.getMonth() + 1,
        0
    );
    firstDay.setHours(0, 0, 0, 0);
    lastDay.setHours(23, 59, 59, 0);
    return [firstDay, lastDay]
}

设置active的类名：

javascript 复制代码

export function setShortCutsClass(text) {
    const data = document.getElementsByClassName('el-picker-panel__shortcut');
    for (let i of data) {
        if (i.innerText === '今日') {
            i.style.background = '#edf4fb';
            i.style.color = '#606266'
        }

        if (i.innerText === text) {
            i.classList.add('el-picker-panel__shortcut-active');
        } else {
            i.classList.remove('el-picker-panel__shortcut-active');
        }
    }
}

在时间选择器的change事件中选中时间后把对应的快捷选项设置为active：

javascript 复制代码

setTimeShortClass(val) {
  Object.keys(this.timeMap).forEach((name) => {
    if (
      Date.parse(val[0]) === Date.parse(this.timeMap[name]()[0]) &&
      Date.parse(val[1]) === Date.parse(this.timeMap[name]()[1])
    ) {
      setShortCutsClass(name);
    }
  });
},

 timeMap: {
    今日: getToday,
    昨日: getYesterday,
    本周: getWeek,
    上周: getLastWeek,
    本月: getMonth,
    上月: getLastMonth,
    近7天: getPassedSeven,
    近14天: getPassedFourteen,
    近30天: getPassedThirty,
    近60天: getPassedSixty,
    近90天: getPassedNinety,
 }