el-date-picker 选择日期范围只保存左侧日期面板

需求

日期筛选,但限制只能选择同一个月的数据,故此应该去掉右侧月份面板。

实现

主要是通过 css 样式实现:

复制代码
<style>
/* 隐藏右边日期面板 */
.el-picker-panel__content.el-date-range-picker__content.is-right .el-date-table,
.el-picker-panel__content.el-date-range-picker__content.is-right
  .el-date-range-picker__header
  div {
  display: none;
}
.el-picker-panel__content.el-date-range-picker__content.is-right
  .el-date-range-picker__header {
  width: 60px;
  top: -331px;
  left: 230px;
}
/* 设置整体日期面板的宽度 */
.el-picker-panel.el-date-range-picker.el-popper {
  width: 322px;
}

/* 隐藏中间线段 */
.el-date-range-picker__content.is-left {
  border-right: none;
}

/* 左边日期面板宽度 */
.el-picker-panel__content {
  width: 63% !important;
}
</style>

实现效果

相关推荐
z-robot13 小时前
Nginx 配置代理
前端
用户479492835691513 小时前
Safari 中文输入法的诡异 Bug:为什么输入 @ 会变成 @@? ## 开头 做 @ 提及功能的时候,测试同学用 Safari 测出了个奇怪的问题
前端·javascript·浏览器
没有故事、有酒14 小时前
Ajax介绍
前端·ajax·okhttp
朝新_14 小时前
【SpringMVC】详解用户登录前后端交互流程:AJAX 异步通信与 Session 机制实战
前端·笔记·spring·ajax·交互·javaee
裴嘉靖14 小时前
Vue 生成 PDF 完整教程
前端·vue.js·pdf
毕设小屋vx ylw28242614 小时前
Java开发、Java Web应用、前端技术及Vue项目
java·前端·vue.js
冴羽15 小时前
今日苹果 App Store 前端源码泄露,赶紧 fork 一份看看
前端·javascript·typescript
蒜香拿铁15 小时前
Angular【router路由】
前端·javascript·angular.js
时间的情敌15 小时前
Vite 大型项目优化方案
vue.js
brzhang15 小时前
读懂 MiniMax Agent 的设计逻辑,然后我复刻了一个MiniMax Agent
前端·后端·架构