实际项目应用案例：
<el-form-item label="开始日期：" prop="StartDate">
<el-date-picker
v-model="temp.StartDate"
:clearable="false"
:picker-options="pickerOptions0"
type="date"
style="50%"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="请选择日期"/>
</el-form-item>
<el-form-item label="计划结束日期：" prop="EndDate">
<el-date-picker
v-model="temp.EndDate"
:clearable="false"
:picker-options="pickerOptions1"
type="date"
style="50%"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期"/>
</el-form-item>
<el-form-item v-if="temp.HasSubmitted" label="实际结束日期：" prop="RealEndDate">
<el-date-picker
v-model="temp.RealEndDate"
:picker-options="realEndDatePickerOptions"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期"/>
</el-form-item>
data() {
return {
formFilter: {
StartDate: null, // 数据库返回时间格式为： YYYY-MM-dd ，2018-11-11
EndDate: null,
},
realEndDatePickerOptions: {
disabledDate: (time) => {
if (this.beginDate) {
return time.getTime() > Date.now() || time.getTime() < this.beginDate
}
}
},
pickerOptions0: {
disabledDate: (time) => {
if (this.beginDate && this.endDate) {
return time.getTime() < this.beginDate || time.getTime() >= this.endDate
}
}
},
pickerOptions1: {
disabledDate: (time) => {
if (this.beginDate && this.endDate) {
return time.getTime() >= this.endDate || time.getTime() < this.beginDate
}
}
}
}
},
computed: {
beginDate() {
return new Date(this.formFilter.StartDate).getTime() - 24 * 3600 * 1000
},
endDate() {
return new Date(this.formFilter.EndDate).getTime()
}
},
一、前提条件：数据库返回时间格式为： YYYY-MM-dd ，例如：2018-11-11
二、重点：
1通过Date（“YYYY-MM-dd ”）.getTime() 转换为时间戳格式，然后比较大小。
2找到date-picker时间组件的方法：disabledDate
3 时间戳格式，减去一日就是减去一日对应的毫秒数：24 * 3600 * 1000
三、缺点：date-picker时间组件通过遍历disabledDate方法来控制日期可选和不可选，有一定的性能损失，不过测试可以接受。建议将需要计算的步骤转移到计算属性computed中进行，保持disabledDate最简化。
四、可能的性能替代方案： onchange事件中判断范围，弹出提示信息，但这种提示不够智能、友好。
提示语句案例：
五、element文档：http://element-cn.eleme.io/#/zh-CN/component/date-picker
六：可能的错误：
报错：disabledDate (time) {}
改为：disabledDate: (time) =>{}
错误 return time.getTime() >= this.endDate || time.getTime() < this.beginDate
改为：if (this.beginDate && this.endDate) { return time.getTime() >= this.endDate || time.getTime() < this.beginDate }
//必须加if条件，建议将容易返回true的判断条件放在前面，减少判断时间。
----------------------------------------------------------------------------------------------------------------------------
参考过的文档：https://blog.csdn.net/qq_25386583/article/details/77044179