element ui 时间选择器增加取消，确定按钮，样式修改

 

 

 

一. 时间选择器是直接挂在body上的，不能直接通过/deep/修改,可以通过popper-class="date-style"，样式引入，注意同级样式层级关系 （scoped）是局部的样式，要去掉 （注意）

1.

 <el-date-picker  ref="datePick" popper-class="date-style" align="right"  @change="dateChenge" v-model="dateDay"
                        type="daterange" :clearable="false" :picker-options="dateButton" range-separator="——"
                        start-placeholder="开始日期"  end-placeholder="结束日期"  format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd">
                        </el-date-picker>
 
2.
 data() {
        let that = this;
        return {
             dateButton: {
                time:'',
                shortcuts: [
                {
                    text: "取消",
                    onClick() {
                    that.dateDay = "";
                    that.$refs.datePick.handleClose();
                    },
                },
                {
                    text: "确定导出",
                    onClick() {
                        if(that.dateDay.length==2){
                            let Start=that.dateDay[0]
                            let End=that.dateDay[1]
                            let dateBegin = new Date(Start); //将-转化为/，使用new Date
                            let dateEnd = new Date(End); //获取当前时间
                            let dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
                            let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
                            if(dayDiff>31){
                                return Snackbar.error('选择日期期间最多31天')
                            }else{
                                that.$refs.datePick.handleClose();
                            }    
                        }
                    },
                },
                ],
            },
}}
 
3.
新建样式文件 并在页面引入  
<style lang="less">
@import "../../assets/style/timePicker.less";
</style>
 
/* 日期控件样式 */
/* input框placeholder样式 */
     /* 日期选择框面板样式 */
     .date-style.el-date-picker, .date-style.el-picker-panel{
        width: 506px !important;
        height: 323px !important;
        // background: rgba(0, 0, 0, 1) !important;
        border: 1px solid rgba(255, 255, 255, 0.3);
        margin: 0;
        font-size: 1rem !important;
        font-family: 'HelveticaNeue-Medium, HelveticaNeue';
        font-weight: 500;
        // color: #FFFFFF;
          /* 日期选择器左侧快捷方式样式重写 定位到底部 */
        .el-picker-panel__sidebar {
            width: 506px;
            height: 40px;
            padding: 0;
            display: flex;
            justify-content: right;
            align-items: center;
            margin-top: 283px;
            background: rgba(0, 0, 0, 0) !important;
            border-right: 1px solid rgba(0, 0, 0, 0);
        }
       
        .el-picker-panel__sidebar :nth-child(2) {
            background-color: #3AA0B8;
            border: none;
            color: #FFFFFF;
        }
       
        .el-picker-panel__sidebar>button {
            width: 56px;
            height: 24px;
            line-height: 20px;
            margin-right: 16px;
            border: 1px solid #6DE3FF;
            font-size: 12px;
            font-family: 'PingFangSC-Regular, PingFang SC';
            font-weight: 400;
            // color: #FFFFFF;
            padding: 0;
            text-align: center;
            border-radius: 2px;
        }
       
        .el-picker-panel__shortcut:hover {
            // color: #fff;
            border: 1px solid #fff;
        }
        /* 日期选择器日历部分样式*/
        .el-picker-panel__body-wrapper {
            width: 506px;
            height: 323px;
            display: flex;
            flex-wrap: wrap;
        }
       
        .el-picker-panel__body {
            margin: 0 !important;
            width: 506px;
            height: 283px;
        }
       
        .el-date-range-picker__header {
            box-sizing: border-box;
            padding: 0 10px;
            font-size: 0.16rem !important;
            font-family: 'HelveticaNeue-Medium, HelveticaNeue';
            font-weight: 500 !important;
            // color: #FFFFFF !important;
        }
       
        .el-date-picker__header-label {
            font-size: 16px;
            font-weight: 500;
            padding: 0 5px;
            line-height: 22px;
            text-align: center;
            cursor: pointer;
            // color: #fff;
        }
       
        .el-picker-panel__content {
            height: 283px;
            padding: 0px;
            border-bottom: 1px solid #e4e4e4;
            box-sizing: border-box !important;
        }
       
        .el-picker-panel__icon-btn {
            font-size: 12px;
            // color: #fff;
            border: 0;
            background: 0 0;
            cursor: pointer;
            outline: 0;
            margin-top: 8px;
        }
       
        .el-date-table {
            box-sizing: border-box;
            padding: 5px;
        }
       
        .el-date-table th {
            padding: 5px;
            // color: #fff;
            font-weight: 400;
            border-bottom: solid 1px rgba(255, 255, 255, 0.3);
        }
       
        .el-date-table td {
            padding: 2px 0px !important;
        }
       
        // .el-date-table td.end-date span,
        // .el-date-table td.start-date span {
        //    
        // }
        // /* 选中范围背景色 */
        // .el-date-table td.in-range div,
        // .el-date-table td.in-range div:hover,
        // .el-date-table.is-week-mode .el-date-table__row.current div,
        // .el-date-table.is-week-mode .el-date-table__row:hover div {
        //    
        // }
     

     }
     .date-style.el-popper[x-placement^=bottom] {
        margin-top: 0px !important;
     }
     
     .date-style.el-popper[x-placement^=bottom] .popper__arrow::after {
        border-bottom-color: rgba(0, 0, 0, 0) !important;
     }
     
     .date-style.el-popper[x-placement^=bottom] .popper__arrow {
        border-bottom-color: rgba(0, 0, 0, 0) !important;
     }
     
     .date-style.el-date-range-picker .el-picker-panel__body {
        min-width: 506px;
     }
     
   
posted @ 2022-09-29 17:46  婷baby  阅读(5071)  评论(0)    收藏  举报