关于element-ui日期选择器时间范围的限制

关于element-UI的日期选择器，一般来说有两种样什的：

地址：DatePicker 日期选择器 | Element Plus

一种是单纯的选择一个日期；二是在一个选择器里同时起始开始日期和结束日期。

本片文章主要记录一下我自己的用法，方便以后温故知新。主要怕忘记。

        首先一点，我在开发中用到的需要两个日期组成一个时间段。而官方文档中有现成的可用，不过有时候在一个选择器里同时选择两个日期不能够很好的满足引用需求。所以我采用了两个选择器来分开定义起始日期和结束日期。这样当只需要一个日期时也可以方便取到。不过这样的话会存在一个小问题。我们分开定义之后，选择器的下拉选择时间范围限制问题？？？。

我总结的问题点如下：

• 选择器的下拉默认显示日期(默认为当前日期)，结束日期的默认显示应该由起始日期选定之后来决定
• 结束日期的选择不能小于开始日期
• 起始日期和结束日期都不能大于当前时间

三个问题在官方文档中给出的日期选择器选择一段时间中都没有，他可以根据你选择的日期判断前后，从而分辨出起始结束日期。那接下来我就说说我的解决方法：

我的解决思路使用（disabled–date）属性来分别给下拉选项添加限制。代码如下：

页面：

el-date-picker(v-model="startDate" type="date" placeholder="开始时间" :disabled-date="startDisabledDate" value-format="YYYYMMDD" :clearable="false" @change="startBtnClickHandle")
el-date-picker(v-model="endDate" type="date" placeholder="结束时间" :disabled-date="endDisabledDate" value-format="YYYYMMDD" :clearable="false" @change="btnClickHandle")

注解一下：v–model：选择器绑定的值；type：显示类型（默认data）；placeholder：占位提示；disabled-data：判断是否禁用日期的函数，接受data对象返回Boolean值；value–format：绑定值格式。(与format是两回事)；change：确认选定的值时触发事件。

ts部分：

startDisabledDate: any = (time: Date) => {
        return time.getTime() > Date.now()
    } //开始日期不能大于当前日期

endDisabledDate: any = (time: Date) => {
        const startDateLater =  moment(this.startDate).toDate().getTime() //开始时间
        const oneYearLater = moment(this.startDate).add(1, "years").toDate().getTime() //只能选一年之后的日期
        return time.getTime() &gt; Date.now() || time.getTime() < startDateLater || time.getTime() &gt; oneYearLater
    }

注解：因为我设置的日期格式是YYYYMMDD的字符串形式，不能用来比较日期大小，所以我通过moment工具把我的字符串装换为时间戳格式来比较大小。

后续补充内容:

moment工具的使用:(更多详情请查看文档)

        中文网： Moment.js 中文网

        英文地址：Moment.js | Home

通过上述就可以实现我自己总结的三个问题。有问题请大佬们帮忙举出，后续有其它会补上。

代码007普通

打赏 收藏 海报 链接