elementUI日期选择实现选择当前月范围

说明

使用elementUI的日期选择组件，根据第一个选中的日期，实现限定日期选择范围为当前月。
效果如图示：

具体实现

1、日期选择组件

<el-date-picker
         type="dates"
         v-model="restDayAdd"
         placeholder="选择一个或多个日期"
         :picker-options="pickerOptions">
 </el-date-picker>

2、添加范围限制

this.pickerOptions = {
    disabledDate: time => {
        const startDay = (new Date(this.restDayAdd[0]).getDate() - 1) * 24 * 3600 * 1000
        const minTime = this.restDayAdd[0] - startDay
        let monthEndDate = new Date(this.restDayAdd[0].getFullYear(), this.restDayAdd[0].getMonth() + 1) // 获取下一月的第一天
        let timeEnd = Date.parse(monthEndDate) - 24 * 3600 * 1000       //下月第一天不能选择
        return time.getTime() < minTime || time.getTime() > timeEnd
    }
}

3、取消范围限制

this.pickerOptions = {
    disabledDate: time => {
        return false
    }
}