elementUI的DatePicker+DateTimePicker组件的自定义日期禁用

一、DatePicker日期选择器的起止时间禁用

时间禁用需求：
1、开始时间不能大于结束时间
2、禁用当前时间的前30天
3、开始时间和结束时间只能选择间隔7天时间
4、禁用当前时间之后的时间

效果图：

详细代码：
ps:
disabledDate函数中的代码你们可以封装到method中，然后在disabledDate函数中这样就不会让data中的数据那么凌乱又长。

<el-date-picker
  v-model="startTime"
  type="datetime"
  value-format="timestamp"
  placeholder="选择开始日期时间"
  align="right"
  :picker-options="pickerOptionsStart"
  >
el-date-picker>
<el-date-picker
  v-model="endTime"
  type="datetime"
  value-format="timestamp"
  placeholder="选择结束日期时间"
  align="right"
  :picker-options="pickerOptionsEnd"
  >
el-date-picker>

export default {
	data () {
		endTime: '',
		startTime: '',
		pickerOptionsStart: {
        disabledDate: (currentTime) => { // 开始时间禁用时间段
          let endDateVal = this.endTime
          if (endDateVal) { // 如果已经选择了结束时间
            // 禁用结束日期的之后时间 和 禁用结束日期的前6天
            return currentTime.getTime() > new Date(endDateVal).getTime() || currentTime.getTime() < new Date(endDateVal).getTime() - 3600 * 1000 * 24 * 6
          }
          // 禁用当前时间的之后时间 和 禁用当前时间的前30天（加载组件就会开启禁用）
          return currentTime.getTime() > new Date().getTime() || currentTime.getTime() < new Date().getTime() - 3600 * 1000 * 24 * 30
        }
      },
      pickerOptionsEnd: {
        disabledDate: (currentTime) => { // 结束时间禁用时间段
          let beginDateVal = this.startTime
          if (beginDateVal) { // 如果已经选择了开始时间
            // 禁用开始日期的之前时间 和 禁用开始日期的之后6天 和 禁用今天之后的日期
            return currentTime.getTime() < new Date(beginDateVal).getTime() || currentTime.getTime() > new Date(beginDateVal).getTime() + 3600 * 1000 * 24 * 6 || currentTime.getTime() > new Date().getTime()
          }
          // 禁用当前时间的之后时间 和 禁用当前时间的前30天（加载组件就会开启禁用）
          return currentTime.getTime() > new Date().getTime() || currentTime.getTime() < new Date().getTime() - 3600 * 1000 * 24 * 30
        }
      },
	}
}

二、DateTimePicker日期和时间范围的时间禁用

时间禁用需求：
1、开始时间不能大于结束时间 （时间范围选择器这个不用管）
2、禁用当前时间的前30天
3、开始时间和结束时间只能选择间隔7天时间
4、禁用当前时间之后的时间

效果图：

详细代码：
ps:
disabledDate函数中的代码你们可以封装到method中，然后在disabledDate函数中这样就不会让data中的数据那么凌乱又长。

<div class="date-picker-wrap">
  <el-date-picker
    v-model="rangeTimeValue"
    type="datetimerange"
    value-format="timestamp"
    range-separator="至"
    start-placeholder="选择开始日期时间"
    end-placeholder="选择结束日期时间"
    :picker-options="pickerOptions"
    class="date-picker-class"
    >
  el-date-picker>
div>

export default {
	data () {
		rangeTimeValue: null,
		pickerMinDate: '',
		pickerOptions: {
		// 选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime()
          if (maxDate) {
            this.pickerMinDate = ''
          }
        },
        disabledDate: (currentTime) => { // 禁用时间段
          if (this.pickerMinDate) { // 如果已经选中了第一个点的时间
            const day6 = 3600 * 1000 * 24 * 6
            const frontTime = this.pickerMinDate - day6
            let afterTime = this.pickerMinDate + day6
            if (afterTime > new Date()) {
              afterTime = new Date()
            }
            // 禁用选中第一个时间的前后6天（选择第一个点后才开启禁用）
            return currentTime.getTime() > afterTime || currentTime.getTime() < frontTime
          }
          // 禁用当前时间的前30天 和 禁用当前时间之后的日期 （加载组件就会开启禁用）
          return currentTime.getTime() < new Date().getTime() - 3600 * 1000 * 24 * 30 || currentTime.getTime() > new Date().getTime()
        }
      }
	}
}

/* 时间范围折行样式 （为了和效果图一致，这里我自定义了时间选择器样式） */
  .date-picker-wrap{
    position: relative;
    width: 100%;
    height: 100px;
    margin-top: 10px;
    .date-picker-class{
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      height: auto;
      padding: 10px;
      padding-left: 30px;
      /deep/ .el-range__icon{
        position: absolute;
        top: 0;
        left: 8px;
      }
      /deep/ .el-range-input{
        width: auto;
        text-align: left;
      }
      /deep/ .el-range-separator{
        display: block;
        width: auto;
      }
      /deep/ .el-range__close-icon{
        position: absolute;
        top: 0;
        right: 10px;
      }
    }
  }