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

2022-05-06 14:52:54 浏览数 (1)

 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]);


            }
        }
    ],
}

0 人点赞