Element-UI DatePicker日期范围选择器兼容移动端样式的修改

渡山川挽月

已于 2023-09-04 11:48:00 修改

阅读量2.4k

点赞数 1

分类专栏： Web前端文章标签： css

于 2023-08-30 10:31:15 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45609680/article/details/132577274

版权

Web前端专栏收录该内容

9 篇文章

订阅专栏

文章介绍了如何在移动端禁止el-date-picker组件的键盘弹出，并通过CSS媒体查询对日期范围选择器的样式进行调整，使其在小屏幕设备上实现响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例：

<el-date-picker v-model="timeScope" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :editable="false" @change=""></el-date-picker>

:editable="false" 移动端禁止键盘弹出

css：

@media (max-width: 768px) {
            .el-date-range-picker .el-picker-panel__body {
                min-width: 100%;
            }
            .el-date-range-picker__content{
                width: 100% !important;
            }
            .el-date-range-picker{
                width: 80% !important;
            }
            .el-date-range-picker__content{
                margin: 0px;
                padding: 5px;
            }
            .el-date-range-picker__content.is-left{
                padding-bottom: 0px;
            }
            .el-date-range-picker__content.is-right {
                padding-top: 0px;
            }
            .el-date-table th{
                padding: 0px;
            }
            .el-date-table td{
                padding: 0px;
            }
        }