选择当前日期之后的日期 之前的不能够选择当前日期之前的
效果如下
<template>
<div>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
<el-form-item label="开始日期" prop="time1">
<el-date-picker
v-model="ruleForm.time1"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="setTime1"
type="date"
placeholder="选择日期"
/>
</el-form-item>
<el-form-item label="结束日期" prop="time2">
<el-date-picker
v-model="ruleForm.time2"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="setTime2"
type="date"
placeholder="选择日期"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
time1: '',
time2: ''
},
rules: {
time1: [{ required: true, message: '请选择', trigger: 'blur' }],
time2: [{ required: true, message: '请选择', trigger: 'blur' }]
},
setTime1: {
disabledDate: time => {
return time.getTime() + 24 * 60 * 60 * 1000 < Date.now()
}
},
setTime2: {
disabledDate: time => {
return time.getTime() + 24 * 60 * 60 * 1000 < Date.now()
}
}
}
}
}
</script>
<style lang="scss" scoped></style>
</script>
如果是两个选项 有开始日期 和结束日期 需要结束日期在开始日期之后 方法一在提交的时候做判断可以这样做 方法二 禁用 会在下文讲到
if (this.ruleForm.time1>this.ruleForm.time2) { this.$message.error('结束日期不能在开始日期之前') return; }
时间跨度为七天的禁用
<template>
<div>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
<el-form-item label="开始日期" prop="time1">
<el-date-picker
v-model="ruleForm.time1"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="setTime1"
type="date"
placeholder="选择日期"
/>
</el-form-item>
<el-form-item label="结束日期" prop="time2">
<el-date-picker
v-model="ruleForm.time2"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="setTime2"
type="date"
placeholder="选择日期"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
time1: '',
time2: ''
},
rules: {
time1: [{ required: true, message: '请选择', trigger: 'blur' }],
time2: [{ required: true, message: '请选择', trigger: 'blur' }]
},
setTime1: {
disabledDate: time => {
if (this.ruleForm.time2) {
// 判断结束时间是否有值 有值的话 从结束时间往前推七天 是开始时间的可选值
return (
// 结束时间小于开始时间时禁用 也就是结束时间不能在开始时间之前
new Date(this.ruleForm.time2).getTime() < time.getTime() ||
new Date(this.ruleForm.time2).getTime() > time.getTime() + 1000 * 3600 * 24 * 7
)
}
}
},
setTime2: {
disabledDate: time => {
if (this.ruleForm.time1) {
// 判断开始时间是否有值 有值的话 从开始时间往后推七天 是结束时间的可选值
return (
// 开始时间大于开始时间时禁用 也就是结束时间不能在开始时间之前
new Date(this.ruleForm.time1).getTime() > time.getTime() ||
new Date(this.ruleForm.time1).getTime() < time.getTime() - 1000 * 3600 * 24 * 7
)
}
}
}
}
}
}
</script>
时间跨度为七天 不能选择当前时间之后的时间 使用单个时间选择器
<template>
<div>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
<el-form-item label="开始日期" prop="time1">
<el-date-picker
v-model="ruleForm.time1"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="setTime1"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
time1: ''
},
rules: {
time1: [{ required: true, message: '请选择', trigger: 'blur' }]
},
timeOne: '',
setTime1: {
// 监听每一次选择日期的事件
onPick: ({ maxDate, minDate }) => {
// 最大时间 最小时间
this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期
// // 如何你选择了两个日期了,就把那个变量置空
if (maxDate) this.timeOne = ''
},
disabledDate: time => {
if (this.timeOne) {
const WEEK = 6 * 24 * 3600 * 1000 // 这里乘以6相当于 限制7天以内
const minTime = this.timeOne - WEEK // 七天之前
const maxTime = this.timeOne + WEEK // 七天之后
return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > new Date()
} else {
return time.getTime() > new Date()
}
}
}
}
}
}
</script>
<style lang="scss" scoped></style>
时间禁用 只能选择当前时间之后的日期和时间
<template>
<div>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
<el-form-item label="开始日期" prop="time1">
<el-date-picker
v-model="ruleForm.time1"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="setTime1"
type="datetime"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="handleChange"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
import moment from 'moment'
export default {
data() {
return {
ruleForm: {
time1: ''
},
rules: {
time1: [{ required: true, message: '请选择', trigger: 'blur' }]
},
timeOne: '',
setTime1: {
disabledDate: time => {
return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000
},
selectableRange: '10:00:00 - 23:59:59'
}
}
},
watch: {
ruleForm: {
handler() {
this.selectable()
},
deep: true,
immediate: true
}
},
methods: {
handleChange(val) {
console.log(val)
// this.selectable()
},
// 可选的时间范围
selectable() {
const date = moment(this.ruleForm.time1).startOf('day').format('x')
const nowDate = moment().startOf('day').format('x')
// 如果选择的是今天 则需要禁用已经过去的时间节点
if (date <= nowDate) {
this.setTime1.selectableRange = `${moment().format('HH:mm:ss')} - 23:59:59`
} else {
// 如果是以后的日期,则不需要禁用时间节点
this.setTime1.selectableRange = '00:00:00 - 23:59:59'
}
}
}
}
</script>
<style lang="scss" scoped></style>