限制时间选择器不能跨月,并且不能选择未来时间
代码如下:
<el-date-picker
v-modal="selectDate"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
:default-time="['00:00:00', '23:59:59']"
range-separator="至"
:picker-options="pickerOptionsMonth"
@change="changeDate">
</el-date-picker>
data() {
return {
selectDate: '',
selectTime: '',
// 只能选取某一个月的时间
pickerOptionsMonth: {
onPick: ({ maxDate, minDate }) => {
this.selectTime = minDate.getTime();
if (maxDate) {
this.selectTime = '';
}
},
disabledDate: time => {
let nowDay = new Date()
nowDay.setHours(23);//设置小时
nowDay.setMinutes(59);//设置分钟
nowDay.setSeconds(59);//设置秒
nowDay.setMilliseconds(59);//设置毫妙
let timestamp = nowDay.getTime();//获取时间戳
if (this.selectTime !== '') {
const selectDate = new Date(this.selectTime)
const nowYear = selectDate.getFullYear() // 当前年
const nowMonth = selectDate.getMonth() // 当前月
// 本月的开始时间
const monthStartDate = new Date(nowYear, nowMonth, 1).getTime()
// 本月的结束时间
const monthEndDate = new Date(nowYear, nowMonth + 1, 0).getTime()
return time.getTime() >= timestamp || time.getTime() < monthStartDate || time.getTime() > monthEndDate
} else {
return time.getTime() >= timestamp
}
}
},
}
},
method: {
// 防止输入的时间跨月,如果输入时间跨月清空时间并提示
changeDate(val) {
//时间点选择改正
if(val!= null){
var statr = val[0],end = val[1]
var val= statr +'至'+ end;
// 时间判断不能跨月
if (statr.substring(0, 7) !== end.substring(0, 7)) {
this.$message.warning('查询支付时间不能跨月')
val = null
this.selectDate= ''
}
}
}
}