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>

实现效果

相关推荐
前端一课4 分钟前
【前端每天一题】🔥 第 9 题:防抖(debounce)与节流(throttle)的区别?如何实现?
前端·面试
前端一课5 分钟前
【前端每天一题】🔥 第 10 题:浅拷贝 vs 深拷贝?如何手写深拷贝?
前端·面试
前端一课10 分钟前
【前端每天一题】🔥 第 8 题:什么是事件委托?它的原理是什么?有哪些优点和常见坑? - 前端高频面试题
前端·面试
前端一课16 分钟前
【前端每天一题】🔥第7题 事件冒泡与事件捕获 - 前端高频面试题
前端·面试
前端一课17 分钟前
【前端每天一题】 第 5 题:Promise.then 执行顺序深入题(微任务队列机制)
前端·面试
前端一课21 分钟前
【前端每天一题】🔥 事件循环第 6 题:setTimeout(fn, 0) 执行时机详解
前端·面试
前端一课22 分钟前
【前端每天一题】🔥 第3题 事件循环 20 道经典面试题(附详细答案)
前端·面试
前端一课25 分钟前
【前端每天一题】第 2 题:var、let、const 的区别?(绝对高频)
前端·面试
前端一课28 分钟前
【前端每天一题】🔥第四题 原型与原型链 - 前端面试必考题
前端·面试
初见00131 分钟前
告别无限循环:深入理解并征服 React Hooks 的依赖数组
前端