element ui 时间日期选择器限制时间

需求

• 跨天时间日期选择器限制到日
• 开始时间结束时间为同一天限制到小时

实现 

1. 使用type="datetimerange"来实现
2. html

    <el-date-picker
             v-model="dateRange"
             value-format="yyyy-MM-dd HH"
             format="yyyy-MM-dd HH"
             type="datetimerange"
             popper-class="not-day"
             :picker-options="pickerOptions"
             range-separator="-"
             start-placeholder="开始时间"
             end-placeholder="结束时间"
             clearable
           ></el-date-picker>

 3.通过picker-options属性来控制时间可选日期范围

 data() {
    var _this = this
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
        onPick({ maxDate, minDate }){
          if(moment(minDate).format("YYYY-MM-DD")!=moment(maxDate).format("YYYY-MM-DD")){
            let div = document.getElementsByClassName("not-day");
            let wrap = div[0].querySelectorAll(".el-date-range-picker__time-picker-wrap");
            wrap.forEach((item,index)=>{
              if((index+1)%2==0){
                let editor =  item.querySelector(".el-date-range-picker__editor");
                setTimeout(()=>{
                  editor.className = 'el-date-range-picker__editor el-input el-input--small is-disabled';
                },100)
              }
            })
          }else{
            _this.isDay = true
          }
        }
      }
    }
  },

css

.el-date-range-picker__editor.is-disabled,.el-date-range-picker__editor.is-disabled .el-input__inner{
  pointer-events: none;
}

其中用到的时间格式化方法monent.js

import moment from 'moment'

效果

跨日期截图

同一天截图