element日期时间选择器+自定义外部选择时间范围快捷键

image.png

代码：

<template>
    <div class="base-date-picker">
        <el-form class="dataForm" label-width="100px">
            <el-form-item label="同步时间：">
                <el-date-picker
                    v-model="date"
                    type="daterange"
                    unlink-panels
                    start-placeholder="开始日期"
                    range-separator="至"
                    end-placeholder="结束日期"
                    popper-class="date-picker-1"
                    >
                </el-date-picker>
                <el-button-group style="margin-left:15px">
                    <el-button type="success" @click="selectDate(1)" size="small">1 天</el-button>
                    <el-button type="primary" @click="selectDate(2)" size="small">2 天</el-button>
                    <el-button type="warning" @click="selectDate(3)" size="small">3 天</el-button>
                </el-button-group>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name:'syncOrder',
    data(){
        return{
            date:[],
        }
    },
    mounted(){
        //默认初始化时选中一天
        this.date = []
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
        this.date.push(start)
        this.date.push(end)
    },
    methods:{
        // 选择时间快捷键
        selectDate(num){
            this.date = []
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * num);
            this.date.push(start)
            this.date.push(end)
        }
    }
}
</script>

深色背景定制css效果

image.png

以下是CSS

<style lang="less" scoped>
 /* 日期外观 */
.base-date-picker{
    /deep/ .el-input__inner{
        background: transparent;
        border: none;
        input{
            background: transparent;
            color: #fff;
        }
        .el-range-separator{
            color: #fff;
        }
    }
    
}

</style>

<style lang="less">
/* 日期弹窗选择器 */
.date-picker-1{
    background: #999 !important;
    /*  在这里接着修改日期弹窗popper的css*/
  
}
</style>