el-date-picker日期列表样式更换为完全不同的样式保证弹出日期弹窗的功能不变

 

<div class="pRelative">
    <div>
        <el-date-picker 
            ref="dateBEDate"
            value-format="yyyy-MM-dd"    
            v-model="formAddMeal.startEndDate"
            type="datetimerange" 
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
        el-date-picker>
    div>
    <div class="pAbsolute dateBox flex aCenter jsb cPointer" @click="cfDate">
        <div class="beginDate" v-show="!formAddMeal.startEndDate">开始日期div>
        <div class="beginDate ed" v-show="formAddMeal.startEndDate">{{ formAddMeal.startEndDate[0] }}div>
        <div class="flex aCenter">
            <div class="el-icon-arrow-right">div>
            <div class="eDate" v-show="!formAddMeal.startEndDate">结束日期div>
            <div class="beginDate ed" v-show="formAddMeal.startEndDate">{{ formAddMeal.startEndDate[1] }}div>
        div>
        <img :src="commonImgPath+'dateIcon.png'" alt="">
    div>
div>

 

.dateBox{
    padding:8px 23px 8px 12px; 
    font-size: 16px; 
    color: #333333;  
    width:310px;
    height:40px;
    box-shadow: 0px 0px 0px 2px rgba(178,178,178,0.22);
    border-radius: 2px 2px 2px;
    box-sizing: border-box;
    left:0;
    top:0;
    z-index:0;
    .beginDate{
        margin-right: 46px;
        &.ed{
            margin-right:0;
        }
    }
    .eDate{
        margin-left:2px;
    }
    img{
        width:18px;
        height:18px;
        margin-left:35px;
    }
}
.pRelative{
    position: relative;
}
.pAbsolute{
    position: absolute;
}
.cPointer{
    cursor: pointer;
}
.flex{
    display: flex;
}
.flexWrap{
    flex-wrap: wrap;
}
.aCenter{
    align-items: center;
}   
.jsb{
    justify-content: space-between;
}