正文

Element-UI 日期范围 date-picke

IP云
IP云V管理员/6 阅读
09/10
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

实际项目应用案例：

<el-form-item label="开始日期：" prop="StartDate">
<el-date-picker
v-model="temp.StartDate"
:clearable="false"
:picker-options="pickerOptions0"
type="date"
style="width: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="width: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事件中判断范围，弹出提示信息，但这种提示不够智能、友好。

提示语句案例：

this.$notify({
title: '提示',
message: '日期超出计划开始和结束范围!',
type: 'warning',
duration: 3000
})

五、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