Element-ui日期时间插件限定选择范围

  <el-form-item label="开始时间:">
          <el-date-picker
            v-model="listQuery.startDate"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptionsStart"
            default-time="00:00:00"
          />
        </el-form-item>
        <el-form-item label="结束时间:">
          <el-date-picker
            v-model="listQuery.endDate"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"   
            :picker-options="pickerOptionsEnd"
            default-time="23:59:59"
          />
        </el-form-item>
<!-- 两个单个的日期时间选则器 --!>

value-format：用来转换日期格式

default-time：用来设定默认时间

:picker-options：用来限定前后两个日期选择范围问题---》前一个日期限定之后，后一个不能再选之前的----》data中参数写法

　　　　pickerOptionsStart: {
        disabledDate: time => {
          if (this.listQuery.endDate) {
            return time.getTime() > new Date(this.listQuery.endDate).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.listQuery.startDate) {
            return time.getTime() < new Date(this.listQuery.startDate).getTime()
          }
        }
      }

将以这两个绑定的参数放入data中即可实现

点击日期输入框里面的清除按钮之后，这是绑定的数据就是null了，需要注意