element el-date-picker选择日期范围组件，改为两个框，daterange vue

这个是看公司里面的一个大佬写得的，当时就觉得很奇怪，怎么=====>

过于神奇了，而且用的是element里面的日期组件，感叹css的强大

先上代码：

html：

        <div class="search-part2"  style="width:200px">
                <div class="search-item">
                    <div>
                        <div class="lable" style="line-height:40px;">开始日期 ：</div>
                        <div class="lable" style="line-height:40px;">结束日期 ：</div>
                    </div>
                    <el-date-picker
                        v-model="searchParams.beginTime"
                        type="daterange"
                        range-separator=""
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>

 css：

<style lang="scss" scoped>
.search-item{
    display: flex;
    width: 200px;
    margin: 5px 0;
    .lable{
        white-space: nowrap;
    }
}
.search-part2{
    /deep/ .el-input__icon /deep/.el-range__icon /deep/.el-icon-date{
        display: none;

    }
    /deep/ .el-range-editor.el-input__inner {
        height: auto;
        border: none;
        display: block;
        padding: 0;
        background:#F5F7FA;
    }
    /deep/ .el-range-editor--small .el-range__icon.el-icon-date,
    /deep/ .el-range-editor--small .el-range-separator{
        display: none;
    }
    /deep/ .el-range-editor .el-range-input {
        line-height: 28px;
        border: 1px solid #DCDFE6;
        height: 28px;
        border-radius: 5px;
        width: calc(100% - 32px);
    }
    /deep/ .el-range-editor.is-active .el-range-input{
        border-color:#3390f8;
    }
    /deep/ .el-date-editor .el-range__close-icon{
        margin-top: -10px;
    }
}
</style>

 

 其实用网页的控制台一个一个去看，还是容易找到突破口的

像这样就可以找到这两个框