【第011篇】ElementUI的el-date-picker组件设置禁用日期范围（如流转期限，开始日期仅可以选择今天及之前，结束日期可以选择开始日期之后的日期）

本文主要是介绍【第011篇】ElementUI的el-date-picker组件设置禁用日期范围（如流转期限，开始日期仅可以选择今天及之前，结束日期可以选择开始日期之后的日期），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<el-form-item label="流转期限" prop="ycsykssj"><el-date-picker v-model="lzqx" type="daterange" style="width: 100%" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :clearable="false" :picker-options="pickerDisabled" @change="changeDate"></el-date-picker>
</el-form-item>

核心代码：

<script>
export default {data () {return {choiceDate0: '', // 第一个选择的日期choiceDate1: '', // 第二个选择的日期pickerDisabled: {onPick: ({maxDate, // 第一个值minDate // 第二个值}) => {this.choiceDate1 = '' // 每次点击的时候将第二个日期设置为空if (minDate) {this.choiceDate0 = minDate.getTime()} else {this.choiceDate0 = ''}if (maxDate) { // 当选择第二个值后，将第一个值清空。this.choiceDate0 = ''this.choiceDate1 = maxDate.getTime()}},disabledDate: (time) => {// 主要思路：// (1)当没有点击的时候，限制只能选择今天及之前日期// (2)当点击一次后，说明第一个值有值了，此时限制第二个值只能选择第一个值之后的日期// (3)当点击第二次后，说明第二个有值了，此时限制第二个值只能选择第一个值之后的日期const choiceDateTime0 = new Date(this.choiceDate0).getTime() // 选中的第一个日期if (!this.choiceDate0 && !this.choiceDate1) { // 第一个和第二个均无值(说明没有点击)return time.getTime() > new Date() * 1 + 600 * 1000} else if (this.choiceDate0 && !this.choiceDate1) { // 第一个有值，但第二个无值(说明点击了一次)return time.getTime() < choiceDateTime0} else if (!this.choiceDate0 && this.choiceDate1) { // 第一个无值，但第二个有值(说明点击了两次次)return time.getTime() < choiceDateTime0} else {return time.getTime() > new Date() * 1 + 600 * 1000}}}}},methods: {changeDate (date) { // 组件值改变事件，当值改变后将第一个值和第二个值设置为空，方便下次设置日期范围。this.choiceDate0 = ''this.choiceDate1 = ''}}
}
</script>