element-plus的el-date-picker日期范围选择控件，根据开始日期限定结束日期的可选范围为开始日期到开始日期+30天

在开发的时候，我们常常遇到日期范围选择根据指定开始日期限定结束日期的可选范围的情况。比如我们选择的开始日期为2022-04-01，则结束日期必须是2022-05-01之前，并且不能超过当前日期。

前端框架：SCUI (vue3 + element-plus)

开源地址：SCUI: 一款开箱即用、高可配、高性能、风格精致、代码优雅的基于Vue3和elementPlus的WebUI前端框架，让前端开发更快乐。

使用的控件：日期范围选择控件 -> el-date-picker

el-date-picker需要使用到的属性和事件，如下：

属性：disabledDate

事件：calendar-change 。主要是为记录选择的开始日期。

日期范围控件代码如下：

javascript代码如下：

完整页面代码如下：

最后实现的效果：

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦