Vue要素el-date-picker日付ピッカーは時間間隔を選択します

1. 要素の日付選択コンポーネントがプロジェクトで使用されており、選択された日付範囲は最大 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" にする必要がありますが、要素 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 か月以内にのみ選択でき、エコーも使用できます.上記のコードはまだ最適化する必要があります.