【第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>