设置el-date-picker选择日期范围时只显示一个日期面板

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

<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>

修改样式后效果图如下：