vue element el-date-picker日期选择器选择时间区间

1.在项目中使用到了element日期选择组件，选择日期区间最大为6个月之前是让不在这区间给限制不让选择

html部分

             <el-date-picker
                  v-model="params.dateTimeRangeVal"
                  type="datetimerange"
                  :editable="false"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  :default-time="params.dateTimeRangeVal"
                  @change="changeTime"
                  >
                </el-date-picker>

js部分

export default {
     pickerOptions: {
        ......
        
        disabledDate: (time) => { //查询时间跨度为31天
          let baseDate = new Date('2020-01-01').getTime()
          if(this.minDate){
            let rangeMonth = 30 * 24 * 3600 * 1000
            return  time.getTime() > Date.now() || time.getTime() > (this.minDate.getTime() + rangeMonth * 6 ) || time.getTime() < (this.minDate.getTime() - rangeMonth * 6) || time.getTime() < baseDate
          }
          return time.getTime() > Date.now() || time.getTime() < baseDate
        }
      },
}

2.后面需求变了，客户需要就是时间都可以选择，如果选择的最大时间超过了当前时间的话就默认选择当前时间点。后面通过触发事件来改变选择的事件节点

export function formatTimestamp(value, fmt="") {
  if (value == null) {
    return ''
  }
  var date = new Date(value)
  var y = date.getFullYear()
  var m = date.getMonth() + 1
  m = m < 10 ? ('0' + m) : m
  var d = date.getDate()
  d = d < 10 ? ('0' + d) : d
  var h = date.getHours()
  h = h < 10 ? ('0' + h) : h
  var minute = date.getMinutes()
  var second = date.getSeconds()
  var milliseconds = date.getMilliseconds()
  minute = minute < 10 ? ('0' + minute) : minute
  second = second < 10 ? ('0' + second) : second
  if(fmt) {
    return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second + '.' + milliseconds
  }
  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
}

后台需要事件格式为 Format"yyyy-MM-dd hh:mm:ss.S"格式，但是element DatePicker 回显不了。后面使用了(new Date()).Format(“yyyy-MM-dd hh:mm:ss.S”) 这种格式解决了这样的问题

    changeTime(val) {
      let minTime = new Date(val[0])
      let maxTime = new Date(val[1])
      let nowTime= new Date()
      let min6Time = new Date(Date.now() - (30 * 24 * 3600 * 1000)*6)
      let timeSection = new Date((maxTime .valueOf() - (30 * 24 * 3600 * 1000)*6)).Format("yyyy-MM-dd hh:mm:ss.S")
      let chaTime = (maxTime .getFullYear() - minTime .getFullYear() > 0) ? (maxTime .getMonth() + (maxTime .getFullYear() - minTime .getFullYear()) * 12) : (maxTime .getMonth() - minTime .getMonth())
      if(maxTime >nowTime&& minTime > min6Time ) {
        this.params.dateTimeRangeVal = [minTime .Format("yyyy-MM-dd hh:mm:ss.S"), nowTime.Format("yyyy-MM-dd hh:mm:ss.S")]
      } else if(maxTime > nowTime&& minTime < min6Time ) {
        this.params.dateTimeRangeVal = [min6Time .Format("yyyy-MM-dd hh:mm:ss.S"), nowTime.Format("yyyy-MM-dd hh:mm:ss.S")]
      }else if(chaTime > 6 && maxTime <nowTime) {
        this.params.dateTimeRangeVal = [timeSection, maxTime .Format("yyyy-MM-dd hh:mm:ss.S")]
      } else {
        this.params.dateTimeRangeVal = [minTime .Format("yyyy-MM-dd hh:mm:ss.S"), maxTime .Format("yyyy-MM-dd hh:mm:ss.S")]
      }
    },

时间区间只能选择6个月之内并且回显也可以了，以上代码还需要优化下.