需求
- 跨天时间日期选择器限制到日
- 开始时间结束时间为同一天限制到小时
实现
- 使用type="datetimerange"来实现
- 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'
效果
跨日期截图
同一天截图