vue封装日期组件（基于elementUI）

• 样式（主要自定义了左边快捷选项，可以自己自定义，默认近七日）
  

• props传参：[startTime,endTime] (yyyy-mm-dd)类型

• 第三方库momentjs

<template>
    <div class="date-picker">
        <el-date-picker v-model="dateTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" @change="chooseDate" :clearable="false"></el-date-picker>
    </div>
</template>

<script>
import moment from "moment";
export default {
    name: "date-picker",
    props: {
        date: {
            type: Array,
            required: true,
        },
    },
    data() {
        return {
            dateTime: [],
            pickerOptions: {
                //日期选择快捷选择
                shortcuts: [
                    {
                        text: "今日",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "昨日",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(moment(start).subtract(1, "days"));
                            end.setTime(moment(end).subtract(1, "days"));
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "近7日",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(moment(start).subtract(6, "days"));
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "近30日",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(moment(start).subtract(29, "days"));
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "本周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(moment(start).weekday(0));
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "上周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(moment(start).weekday(-7));
                            end.setTime(moment(end).weekday(-1));
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "本月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                moment(start).subtract(
                                    moment().date() - 1,
                                    "days"
                                )
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "上月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                moment(
                                    moment().month(moment().month() - 1)
                                ).subtract(moment().date() - 1, "days")
                            );
                            end.setTime(
                                moment(end).subtract(moment().date(), "days")
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
        };
    },
    mounted() {
        this.dateTime = this.date;
    },
    watch: {
        date(val) {
            this.dateTime = val;
        },
    },
    methods: {
        /**
         * @description 选择日期
         */
        chooseDate(val) {
            this.$emit("chooseDate", val);
        },
    },
};
</script>

<style lang='less' scoped>
.date-picker {
    .el-input__inner {
        padding: 3px 10px;
        /deep/.el-range-separator {
            padding: 0px;
        }
    }
}
</style>