el-date-picker选择时间
一、禁止当前时间之后的时间,包括禁止时间点
<el-date-picker :key="'publishDate'" v-model="dataForm.faultTime" style="width:100%" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" :picker-options="{
disabledDate(time) {
return time.getTime() > Date.now()
},
selectableRange: selectableRange
}" />
import dayjs from 'dayjs'
data() {
return {
dataForm: {
faultTime: null, //故障时间
},
selectableRange: "",
};
},
watch: {
'dataForm.faultTime': {
handler(newValue, oldValue) {
console.log("newValue======", newValue)
let dateTime = dayjs().format("YYYY-MM-DD HH:mm:ss"); //当前时间
const dt = dateTime.split(' ')
let maxTime = ''
// 是今天,选择 的时间开始为此刻的时分秒
if (newValue.split(' ')[0] === dt[0]) {
maxTime = dt[1]
if (!oldValue) {
this.dataForm.faultTime = dateTime
} else if (newValue.split(' ')[0] != oldValue.split(' ')[0]) {
this.dataForm.faultTime = dateTime
}
} else {
maxTime = '23:59:59'
}
this.selectableRange = '00:00:00 - ' + maxTime
}
}
},
二、禁止当前时间之前的时间,包括禁止时间点
<el-date-picker :key="'tradingTime'" v-model="dataForm.repairTime" type="datetime" style="width:100%" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="{
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7
},
selectableRange: selectableRange
}" />
import dayjs from 'dayjs'
data() {
return {
dataForm: {
repairTime: null, //维修时间
},
selectableRange: "",
};
},
watch: {
'dataForm.repairTime': {
handler(newValue, oldValue) {
let dateTime = dayjs().format("YYYY-MM-DD HH:mm:ss"); //当前时间
const dt = dateTime.split(' ')
let minTime = ''
// 是今天,选择 的时间开始为此刻的时分秒
if (newValue.split(' ')[0] === dt[0]) {
minTime = dt[1]
if (!oldValue) {
this.dataForm.repairTime = dateTime
} else if (newValue.split(' ')[0] != oldValue.split(' ')[0]) {
this.dataForm.repairTime = dateTime
}
} else {
minTime = '00:00:00'
}
this.selectableRange = minTime + ' - 23:59:59'
}
}
},
网友评论