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

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;
}
相关推荐
liangshanbo12153 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15886 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_6 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD6 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
哆啦A梦15887 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫7 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo7 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li8 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐8 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
浪裡遊9 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php