前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Element 中时间选择器配置 本月 及 上个月 快捷方式

Element 中时间选择器配置 本月 及 上个月 快捷方式

作者头像
越陌度阡
发布2022-05-06 14:52:54
4890
发布2022-05-06 14:52:54
举报

 Element-UI中的时间选择器代码示例没有提供本月及上个月的快捷选择方式,以下提供所需代码,方便大家使用。

以下是要实现的效果图:

以下快捷选择方式的配置代码:

代码语言:javascript
复制
pickerOptions: {
    disabledDate(time) {
        return time.getTime() > Date.now();
    },
    shortcuts: [
        {
            text: "今天",
            onClick(picker) {
                picker.$emit("pick", new Date());
            },
        },
        {
            text: "昨天",
            onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
            },
        },
        {
            text: "一周前",
            onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
            },
        },

        {
            text: '本月',
            onClick(picker) {
                var now = new Date();
                var year = now.getFullYear();
                var month = now.getMonth()+1;
                if(month<10){
                    month = '0'+month;
                }
                var myDate = new Date(year,month,0);
                // 本月第一天
                var startDate = new Date(year+'-'+month+'-01 00:00:00'); 
                picker.$emit('pick', [startDate, now]);

            }
        }, 
        {
            text: '上个月',
            onClick(picker) {

                var now = new Date();
                var year = now.getFullYear();
                var month = now.getMonth();
                if(month==0){
                    month = 12;
                    year = year-1;
                }
                if(month<10){
                    month = '0'+month;
                }

                var myDate = new Date(year,month,0);

                // 上个月第一天
                var startDate = new Date(year+'-'+month+'-01 00:00:00'); 
                // 上个月最后一天
                var endDate = new Date(year+'-'+month+'-'+myDate.getDate()+' 23:59:00');

                picker.$emit('pick', [startDate, endDate]);


            }
        }
    ],
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-12-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档