element 日期控件 限制开始日期和结束日期

基于element ui中的时间日期控件的开始日期和结束日期的限制用picker-options属性， 当前日期时间器特有的选项。

代码如下：

<el-form-item

label="开始日期"

label-width="90px"

prop="startDate">

<el-date-picker

v-model="statDate"

:picker-options="startDateOptions"

type="date"

clearable

style="width:140px"

value-format="yyyy-MM-dd"

placeholder="开始日期"/>

</el-form-item>

<el-form-item

label="结束日期"

label-width="90px"

prop="endDate">

<el-date-picker

v-model="endDate"

:picker-options="EndDateOptions"

type="date"

clearable

style="width:140px"

value-format="yyyy-MM-dd"

placeholder="结束日期"/>

</el-form-item>

export default{

data() {

return {

// 时间开始测试

startDateOptions: {

// console.log(time)

disabledDate: (time) => {

if (!Object.is(this.endDate, '')) {

return time.getTime() > Date.now(this.endDate) - 8.64e7 || time.getTime() > new Date(this.endDate).getTime()// 如果当天可选，就不用减8.64e7

} else {

return time.getTime() > Date.now(this.endDate) - 8.64e7

}

}

},

// 时间结束测试

EndDateOptions: {

disabledDate: (time) => {

return time.getTime() < new Date(this.statDate).getTime() || time.getTime() > Date.now() || time.getTime() > Date.now(this.statDate) - 8.64e7 // 如果当天可选，就不用减8.64e7

}

},

statDate: '',

// 结束日期

endDate: '',

// 开始日期至结束日期

　

}

}

}

使用了es6的新特性中箭头函数，箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ ... }和return。还有一种可以包含多条语句，这时候就不能省略{ ... }和return