element-ui el-date-picker 时间选择器快捷访问,快捷选项
发布于 2 个月前 作者 webdashen 491 次浏览 来自 分享

期望效果如下

element-ui 中 el-date-picker 组件实现快捷选项:昨天、今天、最近三天、最近七天、最近30天、前30-60天、本月和上个月

image.png

代码如下

dataMixin.js


export default {
    data() {
        let vue = this
        return {
            pickerOptions: {
                shortcuts: [
                {
                    text: "今天",
                    onClick(picker) {
                    let date = new Date();
                    let start =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 00:00:00";
                    let end =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 23:59:59";
                    picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                    ]);
                    }
                },
                {
                    text: "昨天",
                    onClick(picker) {
                    let date = new Date();
                    let start = date.setTime(date.getTime() - 3600 * 1000 * 24 * 1);
                    start =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 00:00:00";
                    let end =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 23:59:59";
                    picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                    ]);
                    }
                },
                {
                    text: "最近三天",
                    onClick(picker) {
                    let date = new Date();
                    let end =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 23:59:59";
                    let start = date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
                    start =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 00:00:00";

                    picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                    ]);
                    }
                },
                {
                    text: "最近七天",
                    onClick(picker) {
                    let date = new Date();
                    let end =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 23:59:59";
                    let start = date.setTime(date.getTime() - 3600 * 1000 * 24 * 6);
                    start =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 00:00:00";
                    picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                    ]);
                    }
                },
                {
                    text: "最近30天",
                    onClick(picker) {
                    let date = new Date();
                    let end =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 23:59:59";
                    let start = date.setTime(date.getTime() - 3600 * 1000 * 24 * 29);
                    start =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 00:00:00";
                    picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                    ]);
                    }
                },
                {
                    text: "前31~60天",
                    onClick(picker) {
                    let datestart = new Date();
                    let start = datestart.setTime(
                        datestart.getTime() - 3600 * 1000 * 24 * 59
                    );
                    start =
                        datestart.getFullYear() +
                        "-" +
                        Number(datestart.getMonth() + 1) +
                        "-" +
                        datestart.getDate() +
                        " 00:00:00";
                    let dateend = new Date();
                    let end = dateend.setTime(
                        dateend.getTime() - 3600 * 1000 * 24 * 30
                    );
                    end =
                        dateend.getFullYear() +
                        "-" +
                        Number(dateend.getMonth() + 1) +
                        "-" +
                        dateend.getDate() +
                        " 23:59:59";
                    picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                    ]);
                    }
                },
                {
                    text: "本月",
                    onClick(picker) {
                    let date = new Date();
                    let start =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-01" +
                        " 00:00:00";
                    let lastDay = new Date(
                        date.getFullYear(),
                        Number(date.getMonth() + 1),
                        0
                    );
                    let end =
                        lastDay.getFullYear() +
                        "-" +
                        Number(lastDay.getMonth() + 1) +
                        "-" +
                        lastDay.getDate() +
                        " 23:59:59";
                    picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                    ]);
                    }
                },
                {
                    text: "上个月",
                    onClick(picker) {
                    let date = new Date();
                    let year = date.getFullYear();
                    let month = date.getMonth();
                    if (month == 0) {
                        month = 12;
                        year = year - 1;
                    }
                    if (month < 10) {
                        month = "0" + month;
                    }
                    let firstDay = year + "-" + month + "-" + "01" + " 00:00:00"; //上个月的第一天
                    let myDate = new Date(year, month, 0);
                    let lastDay =
                        year + "-" + month + "-" + myDate.getDate() + " 23:59:59"; //上个月的最后一天
                    picker.$emit("pick", [
                        vue.dateTImeReset(firstDay),
                        vue.dateTImeReset(lastDay)
                    ]);
                    }
                }
                ]
            }
        }
    },
    methods: {
        setTimeMixinDataPick () {
            const vue = this
            this.$set(
                this.$data.pickerOptions,
                "shortcuts", // 时间组件基础配置
                [
                    {
                    text: "今天",
                    onClick(picker) {
                        let date = new Date();
                        let start =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 00:00:00";
                        let end =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 23:59:59";
                        picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                        ]);
                    }
                    },
                    {
                    text: "昨天",
                    onClick(picker) {
                        let date = new Date();
                        let start = date.setTime(date.getTime() - 3600 * 1000 * 24 * 1);
                        start =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 00:00:00";
                        let end =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 23:59:59";
                        picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                        ]);
                    }
                    },
                    {
                    text: "最近三天",
                    onClick(picker) {
                        let date = new Date();
                        let end =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 23:59:59";
                        let start = date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
                        start =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 00:00:00";

                        picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                        ]);
                    }
                    },
                    {
                    text: "最近七天",
                    onClick(picker) {
                        let date = new Date();
                        let end =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 23:59:59";
                        let start = date.setTime(date.getTime() - 3600 * 1000 * 24 * 6);
                        start =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 00:00:00";
                        picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                        ]);
                    }
                    },
                    {
                    text: "最近30天",
                    onClick(picker) {
                        let date = new Date();
                        let end =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 23:59:59";
                        let start = date.setTime(
                        date.getTime() - 3600 * 1000 * 24 * 29
                        );
                        start =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-" +
                        date.getDate() +
                        " 00:00:00";
                        picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                        ]);
                    }
                    },
                    {
                    text: "前31~60天",
                    onClick(picker) {
                        let datestart = new Date();
                        let start = datestart.setTime(
                        datestart.getTime() - 3600 * 1000 * 24 * 59
                        );
                        start =
                        datestart.getFullYear() +
                        "-" +
                        Number(datestart.getMonth() + 1) +
                        "-" +
                        datestart.getDate() +
                        " 00:00:00";
                        let dateend = new Date();
                        let end = dateend.setTime(
                        dateend.getTime() - 3600 * 1000 * 24 * 30
                        );
                        end =
                        dateend.getFullYear() +
                        "-" +
                        Number(dateend.getMonth() + 1) +
                        "-" +
                        dateend.getDate() +
                        " 23:59:59";
                        picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                        ]);
                    }
                    },
                    {
                    text: "本月",
                    onClick(picker) {
                        let date = new Date();
                        let start =
                        date.getFullYear() +
                        "-" +
                        Number(date.getMonth() + 1) +
                        "-01" +
                        " 00:00:00";
                        let lastDay = new Date(
                        date.getFullYear(),
                        Number(date.getMonth() + 1),
                        0
                        );
                        let end =
                        lastDay.getFullYear() +
                        "-" +
                        Number(lastDay.getMonth() + 1) +
                        "-" +
                        lastDay.getDate() +
                        " 23:59:59";
                        picker.$emit("pick", [
                        vue.dateTImeReset(start),
                        vue.dateTImeReset(end)
                        ]);
                    }
                    },
                    {
                    text: "上个月",
                    onClick(picker) {
                        let date = new Date();
                        let year = date.getFullYear();
                        let month = date.getMonth();
                        if (month == 0) {
                        month = 12;
                        year = year - 1;
                        }
                        if (month < 10) {
                        month = "0" + month;
                        }
                        let firstDay = year + "-" + month + "-" + "01" + " 00:00:00"; //上个月的第一天
                        let myDate = new Date(year, month, 0);
                        let lastDay =
                        year + "-" + month + "-" + myDate.getDate() + " 23:59:59"; //上个月的最后一天
                        picker.$emit("pick", [
                        vue.dateTImeReset(firstDay),
                        vue.dateTImeReset(lastDay)
                        ]);
                    }
                    }
                ]
            );
        }
    },
}

引用代码 - js

import timeMixin from '../components/timeMixin'
export default {
    name: "",
    mixins: [timeMixin]
}

vue-template代码

<el-date-picker
  v-model="createTime"
  size="small"
  type="datetimerange"
  range-separator="至"
  :editable="false"
  format="yyyy-MM-dd HH:mm:ss"
  value-format="yyyy-MM-dd HH:mm:ss"
  :default-time="['00:00:00', '23:59:59']"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :picker-options="pickerOptions"
  >
</el-date-picker>

s

最好是在mounted里面再次调用一下 this.setTimeMixinDataPick() 方法,好像是可以解决一个有时候失效的问题

回到顶部