element 中设置el-date-picke 禁用今天及其以后的日期禁止选择,设置时间跨度30天

本文主要是介绍element 中设置el-date-picke 禁用今天及其以后的日期禁止选择,设置时间跨度30天，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

element组件date-picke 设置今天开始以后的我日期都不可选。
官方文档提供一个disabledDate 属性，返回值是一个回调函数，可以实现
在这里插入图片描述
下面看代码
给组件绑定options 属性，设置disabledDate 的值是一个函数函数的返回值是Boolean

 <el-date-picker class="dateCom"v-model="form.date"type="daterange"value-format="yyyy-MM-dd"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="{disabledDate:dateOptions}">

// 选择今天及今天之前的日期
dateOptions (time) {return time.getTime() > Date.now() - 8.64e6
},
// 选择今天及今天以后的日期
dateOptions (time) {return time.getTime() < Date.now() - 8.64e6},

2、设置时间跨度30天

  <el-date-picker v-model="date":editable="false"value-format="yyyy-MM-dd":clearable="false"type="daterange"key="day"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"style="width:230px"v-if="type===5":picker-options="pickerOptions"></el-date-picker>

 data () {return {minDate: '',maxDate: '',pickerOptions: { // 时间范围选择控制onPick: ({ maxDate, minDate }) => {this.minDate = minDatethis.maxDate = maxDate},disabledDate: (time) => { // 查询时间跨度为31天if (this.minDate) {let range = 30 * 24 * 3600 * 1000return time.getTime() > Date.now() || time.getTime() > (this.minDate.getTime() + range) || time.getTime() < (this.minDate.getTime() - range)}return time.getTime() > Date.now()}}}},