element时间范围控件动态限定可选范围（填坑）

由于项目的特定要求，需要让时间范围的结束时间默认为空，但开始时间需要填入默认值，element时间范围控件不支持这种形式，所以只能拆开用两个时间控件来实现日期时间范围。

时间控件

由于接口传参要求时间的格式为yyyy-MM-dd HH:mm:ss，所以定义了value-format这里遇到了一个坑，下面会提到，代码如下

<el-form-item label="时间范围">
  <el-date-picker
    v-model="dataForm.startTime"
    type="datetime"
    format="yyyy-MM-dd HH:mm"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="pickerOptions0"
    range-separator="至"
    placeholder="开始时间"
    default-time="00:00:00" 
    align="right">
    <span slot="append">-</span>
  </el-date-picker>
</el-form-item>
<el-form-item label="">
  <el-date-picker
    v-model="dataForm.endTime"
    type="datetime"
    format="yyyy-MM-dd HH:mm"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="pickerOptions1"
    placeholder="结束时间"
    default-time="23:59:59" 
    align="right">
  </el-date-picker>
</el-form-item>

因为要动态更改时间可选范围，所以将disabledDate代码块在计算属性中实现

export default {
    data() {
      return {
        dataForm: {
          startTime: '2020-07-01 00:00:00',
          endTime: ''
        },
      }
    },
    created() {
      
    },
    computed: {
      pickerOptions0() {
        let _this = this
        return {
          disabledDate(time) {
            //有结束时间时开始时间禁选结束时间之后的时间或者禁选当前时间之后的时间
            if (_this.dataForm.endTime != "") {
              return time.getTime() > Date.now() || time.getTime() > _this.dataForm.endTime;
            } else {
              return time.getTime() > Date.now();
            }
          }
        }
      },
      pickerOptions1() {
        let _this = this
        return {
          disabledDate(time) {
            //结束时间禁止选开始时间之前的时间以及当前时间之后的时间
            return time.getTime() < _this.dataForm.startTime || time.getTime() > Date.now();
          }
        }
      }
    },
  }

按照这个方法发现限制范围部分生效，并且在操作控件之后范围并没有发生变化，经过一阵子怀疑人生之后我终于发现了问题所在，矛头就是disabledDate方法判断时用的是时间戳，而我们定义了时间格式为"yyyy-MM-dd HH:mm"，这就到导致time.getTime() < _this.dataForm.startTime这段代码无法在一起比较，从而也就没生效，只生效了time.getTime() > Date.now()的判断。

既然找到了原因我们就知道了解决的方向，那么解决办法有两种

在disabledDate的方法中将_this.dataForm.startTime、_this.dataForm.endTime转成时间戳用来比较
将时间控件的value-format改成timestamp也就是时间戳格式，在调用接口时将startTime和endTime转成我们要的格式传入
两个方案对比选择第二种，那么将上面的代码改一下

<el-form-item label="时间范围">
  <el-date-picker
    v-model="dataForm.startTime"
    type="datetime"
    format="yyyy-MM-dd HH:mm"
    value-format="timestamp"<!-- 改动部分 -->
    :picker-options="pickerOptions0"
    range-separator="至"
    placeholder="开始时间"
    default-time="00:00:00" 
    align="right">
    <span slot="append">-</span>
  </el-date-picker>
</el-form-item>
<el-form-item label="">
  <el-date-picker
    v-model="dataForm.endTime"
    type="datetime"
    format="yyyy-MM-dd HH:mm"
    value-format="timestamp"<!-- 改动部分 -->
    :picker-options="pickerOptions1"
    placeholder="结束时间"
    default-time="23:59:59" 
    align="right">
  </el-date-picker>
</el-form-item>

export default {
    data() {
      return {
        dataForm: {
          startTime: '',
          endTime: ''
        },
      }
    },
    created() {
       //设置开始时间<!-- 改动部分 -->
      this.dataForm.startTime = new Date(new Date().getTime() - 3 * 24 * 3600 * 1000);
    },
    computed: {
      pickerOptions0() {
        let _this = this
        return {
          disabledDate(time) {
            //有结束时间时开始时间禁选结束时间之后的时间或者禁选当前时间之后的时间
            if (_this.dataForm.endTime != "") {
              return time.getTime() > Date.now() || time.getTime() > _this.dataForm.endTime;
            } else {
              return time.getTime() > Date.now();
            }
          }
        }
      },
      pickerOptions1() {
        let _this = this
        return {
          disabledDate(time) {
            //结束时间禁止选开始时间之前的时间以及当前时间之后的时间
            return time.getTime() < _this.dataForm.startTime || time.getTime() > Date.now();
          }
        }
      }
    },
  }

开始时间

结束时间

这样就成功了！结束时间可以根据开始时间的选择动态改变可选范围了~
功能实现，最后只需将时间戳转成我们需要的格式，我们再定义一个全局函数来处理时间戳转化

/** 
 * 时间戳转化为年 月 日 时 分 秒 
 * number: 传入时间戳 
 * format：返回格式，支持自定义，但参数必须与formateArr里保持一致 
*/  
export function formatTime(number,format = 'Y-M-D h:m:s') {  
    var formateArr  = ['Y','M','D','h','m','s'];  
    var returnArr   = [];  
    if(number == ''){
        return ''
    }else{
        var date = new Date(number);  
        returnArr.push(date.getFullYear());  
        returnArr.push(formatNumber(date.getMonth() + 1));  
        returnArr.push(formatNumber(date.getDate()));  

        returnArr.push(formatNumber(date.getHours()));  
        returnArr.push(formatNumber(date.getMinutes()));  
        returnArr.push(formatNumber(date.getSeconds()));  

        for (var i in returnArr)  
        {  
            format = format.replace(formateArr[i], returnArr[i]);  
        }  
        return format; 
    }
} 

//数据转化  
export function formatNumber(n) {  
    n = n.toString()  
    return n[1] ? n : '0' + n  
}

这里实在懒得自己写，拿来主义用了一下别人的代码2333~，原博，不过他的代码有点小问题改了一下下，在项目中引入

import { formatTime } from '@/utils'

this.$http({
  url: this.$http.adornUrl('url'),
  method: 'get',
  params: this.$http.adornParams({
    startTime: formatTime(this.dataForm.startTime),
    endTime: formatTime(this.dataForm.endTime)
  })
}).then(({data}) => {
  if (data && data.code === 0) {
    ...
  } else {
   
  }
})

大功告成了~

总结

我们在使用disabledDate时要注意格式问题，element用的是时间戳来比较，如定义了value-format属性需要注意可能导致的相应问题，须通过转换来解决。