Vue element el-date-picker date picker selects time interval

1. The element date selection component is used in the project, and the date range selected is up to 6 months ago, so that it is not allowed to be restricted in this range and not allowed to choose

html part

             <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 part

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. Later, when the requirements change, the customer can choose even the time. If the maximum time selected exceeds the current time, the current time point will be selected by default. Later, change the selected event node by triggering the event

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
}

The background needs the event format to be Format "yyyy-MM-dd hh:mm:ss.S", but the element DatePicker cannot echo it. Later, the format (new Date()).Format(“yyyy-MM-dd hh:mm:ss.S”) is used to solve this problem

    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")]
      }
    },

The time interval can only be selected within 6 months and the echo is also available. The above code still needs to be optimized.