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

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

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

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

我总结的问题点如下：

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

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

我的解决思路使用（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：占位提示；disa bled-data：判断是否禁用日期的函数，接受data 对象返回Bo olean值；value–format：绑定值格式。(与format是两回事)；change：确认选定的值时触发事件。

ts 部分：

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

endDisabledDate: any = (time: Date) =&gt; {
        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().add()/subtract()用法
	相同点	区别、用法
add()	(Numb er, Str in g);根据Str in g 类型的参数不同,达到改变时间的效果,参数可为如下:’year‘,’month‘,’day‘…等等	该方法根据参数向后调整当前时间
subtract()		该方法根据参数向前调整当前时间