设置el-date-picker选择日期范围时只显示一个日期面板_日期选择器选择月份范围只展示一个下拉框-CSDN博客

本文链接：https://blog.csdn.net/weixin_51187393/article/details/133857053

文章讲述了如何在ElementUI的el-date-picker组件中实现日期范围选择器，只允许用户选择一个月的范围，同时通过CSS样式隐藏右侧面板和调整布局。最终实现了预期的效果。

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

官网提供设置选择日期范围，现需求是限制只能选择一个月的范围不跨月，代码更改为


<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions" unlink-panels>
</el-date-picker>


pickerOptions: {
    disabledDate(time) {
        const currentDate = new Date();
        const currentMonth = currentDate.getMonth();
        const selectedMonth = time.getMonth();
        const maxDate = new Date(currentDate.getFullYear(), currentMonth + 1, 0);
        return selectedMonth !== currentMonth || time > maxDate;
    },
}

但是显示的效果跟想像有偏差，只是用代码限制了不可以写入超出的日期范围，但是右边的面板依旧存在，后更改样式，改成只能在月区域只设置范围。

样式修改代码：

<style>
  /* 隐藏右边日期面板 */
  .el-picker-panel__content.el-date-range-picker__content.is-right {
    display: none;
  }

  /* 设置整体日期面板的宽度 */
  .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>

修改样式后效果图如下：