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

路光.2023-11-11 10:46

html 复制代码

<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>

javascript 复制代码

<script>
 export default{ 
    data(){
        return{
            commonImg:'',//图片的前缀，就是图上的那个日历小图标，忽略
             formAddMeal:{ 
                startEndDate:'',
                endDate:'',
                startDate:'', 
            }
        }
    },
    methods:{
        cfDate(){
            //触发日期组件的焦点事件，弹出选择日期弹窗
            this.$refs.dateBEDate.focus()
        }
    }
 } 
</script>

css 复制代码

.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;
}