element-ui日期时间范围选择(两天之差)

4,357 阅读1分钟

html

    <el-date-picker
      clearable 
      v-model="times"
      :picker-options="pickerOptions"
      size="medium"
      style="width:25%"
      type="datetimerange"
      range-separator="-"
      value-format="yyyy-MM-dd HH:mm:ss"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>

script

data(){
    return{
    //限制时间范围选择(两天)
      pickerMinDate:'',
      pickerOptions: {
      //onPick当type="datetimerange"时有效
          onPick: ({ maxDate, minDate }) => {
            this.pickerMinDate = minDate.getTime()
            if (maxDate) {
              this.pickerMinDate = ''
            }
          },
          disabledDate: (time) => {
            if (this.pickerMinDate!='') {
              let tow = 1 * 24 * 3600 * 1000 //重点是在这里计算相差几天
              let minTime = this.pickerMinDate - tow
              let maxTime = this.pickerMinDate + tow
              return time.getTime() < minTime || time.getTime() > maxTime
              
            }
          }
      },
    }
}