介绍
在使用 element的 DatePicker 日期选择器时；当有多个时间，并且相互存在着限制关系的时候，可以使用日期选择器里的 picker-options 属性，来进行限制。
使用场景
一： 开始时间与结束时间
当有两个时间：开始时间和结束时间；
他们的关系是： 如果有开始时间，那么结束时间必须大于开始时间并且小于当前时间。如果有结束时间，那么开始时间必须再结束时间及以前。
代码如下：
<template>
<div>
<el-form class="publish-form" :model="form" :rules="rules" label-position="top" :inline="true" ref="fromData" :show-message="false">
<el-form-item prop="startTime" label="开始时间" class="way-form-box">
<el-date-picker v-model="form.startTime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptionsStart" placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<el-form-item prop="finishTime">
<span slot="label">
创作完成时间
<span style="color: #999;">（示例：1990-01-01）</span>
</span>
<el-date-picker v-model="form.finishTime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptionsEnd" placeholder="请选择">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
<template>
<div>
<el-form class="publish-form" :model="formData" :rules="rules" label-position="top" :inline="true" ref="formDataRef" :show-message="false">
<el-form-item prop="startTime" label="开始时间" class="way-form-box">
<el-date-picker v-model="formData.startTime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptionsStart" placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<el-form-item prop="finishTime">
<span slot="label">
完成时间
<span style="color: #999;">（示例：1990-01-01）</span>
</span>
<el-date-picker v-model="formData.finishTime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptionsEnd" placeholder="请选择">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
// form 表单字段
formData: {
startTime: "", // 开始时间
finishTime: "", // 结束时间
},
rules: {
// 开始时间
startTime: [
{
type: "string",
required: false,
message: "请选择开始时间",
trigger: "change",
},
],
// 结束时间
finishTime: [
{
type: "string",
required: true,
message: "请选择完成时间",
trigger: "change",
},
],
},
// 开始时间限制
pickerOptionsStart: {
disabledDate: time => {
// 获取结束时间
let endTime = this.formData.finishTime;
// 如果有结束时间，开始时间必须在结束时间及以前
if(endTime) {
return (time.getTime() >= new Date(endTime).getTime());
} else {
// 选择今天之前
// return time.getTime() > Date.now() - 8.64e6 - 24*60*60*1000;
// 今天及以前
return time.getTime() > Date.now() - 8.64e6;
}
}
},
// 结束时间限制
pickerOptionsEnd: {
disabledDate: time => {
// 获取开始时间
let startTime = this.formData.startTime;
// 如果有开始时间，结束时间必须在开始时间及以后
if(startTime) {
// 选择开始时间以前
// return ((time.getTime() < new Date(startTime).getTime() - 8.64e6) || ( time.getTime() > Date.now() - 8.64e6));
// 开始时间及以前
return ((time.getTime() <= new Date(startTime).getTime() - 86400000) || (time.getTime() >= Date.now()));
}
}
}
}
}
}
</script>
二： 开始时间，结束时间与发表时间
当有三个时间：开始时间和结束时间，发表时间；
他们的关系是： 开始时间 <= 结束时间 <= 发表时间
代码如下：
<template>
<div>
<el-form class="publish-form" :model="formData" :rules="rules" label-position="top" :inline="true" ref="formDataRef" :show-message="false">
<el-form-item prop="startTime" label="开始时间" class="way-form-box">
<el-date-picker v-model="formData.startTime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptionsStart" placeholder="请选择时间">
</el-date-picker>
</el-form-item>
<el-form-item prop="finishTime">
<span slot="label">
完成时间
<span style="color: #999;">（示例：1990-01-01）</span>
</span>
<el-date-picker v-model="formData.finishTime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptionsEnd" placeholder="请选择">
</el-date-picker>
</el-form-item>
<el-form-item prop="publishTime" label="发表时间">
<el-date-picker v-model="formData.publishTime" value-format="yyyy-MM-dd" type="date" :picker-options="publishOptions" placeholder="请选择时间">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
// form 表单字段
formData: {
startTime: "", // 开始时间
finishTime: "", // 结束时间
publishTime: "", // 发表时间
},
rules: {
// 开始时间
startTime: [
{
type: "string",
required: false,
message: "请选择开始时间",
trigger: "change",
},
],
// 结束时间
finishTime: [
{
type: "string",
required: true,
message: "请选择完成时间",
trigger: "change",
},
],
},
// 开始时间限制
pickerOptionsStart: {
disabledDate: time => {
// 获取结束时间
let endTime = this.formData.finishTime;
// 获取发表时间
let publishTime = this.formData.publishTime;
// 如果有结束时间，开始时间必须在结束时间及以前
if (endTime) {
return (time.getTime() >= new Date(endTime).getTime());
}
// 如果选择了发表时间；那么开始时间必须在发表以前
if (publishTime) {
return (time.getTime() >= new Date(publishTime).getTime());
}
else {
// console.log(Date.now());
// 选择今天之前
// return time.getTime() > Date.now() - 8.64e6 - 24*60*60*1000;
// 今天及以前
return time.getTime() > Date.now() - 8.64e6;
}
}
},
// 结束时间限制
pickerOptionsEnd: {
disabledDate: time => {
// 获取开始时间
let startTime = this.formData.startTime;
// 获取发表时间
let publishTime = this.formData.publishTime;
if (startTime && publishTime) {
// 如果有开始时间 并且有 发表时间； 那结束时间必须在开始及以后 ；并且 发表及以前
return ((time.getTime() <= new Date(startTime).getTime() - 86400000) || (time.getTime() > new Date(publishTime).getTime()))
} else if (startTime) {
return ((time.getTime() <= new Date(startTime).getTime() - 86400000) || (time.getTime() >= Date.now()));
}
else if (publishTime) {
return (time.getTime() >= new Date(publishTime).getTime());
}
else {
// 选择今天以及今天之前
return time.getTime() > Date.now() - 8.64e6;
}
}
},
// 发表时间
publishOptions: {
disabledDate: time => {
// 获取完成时间
let endTime = this.formData.finishTime;
if (endTime) {
return ((time.getTime() <= new Date(endTime).getTime() - 86400000) || (time.getTime() > Date.now()));
} else {
// 选择今天以及今天之前；
return time.getTime() > Date.now() - 8.64e6;
}
}
},
}
}
}
</script>