为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,
 }
相关推荐
Mr_Mao3 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜055 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~6 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.7 小时前
serviceWorker缓存资源
前端
RadiumAg8 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo8 小时前
ES6笔记2
开发语言·前端·javascript
yanlele8 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子9 小时前
React状态管理最佳实践
前端
烛阴9 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子9 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端