环境
项目为vue2.x项目,目的为开始日期不能大于结束日期,结束日期不能小于开始日期。
Html代码
<a-date-picker
format="YYYY-MM-DD"
:disabled-date="disabledDateBegin"
:show-time="false"
v-model="queryParam.createTime_begin"
valueFormat="YYYY-MM-DD"
placeholder="请选择开始时间"
/>
<a-date-picker
format="YYYY-MM-DD"
:disabled-date="disabledDateEnd"
:show-time="false"
v-model="queryParam.createTime_end"
valueFormat="YYYY-MM-DD"
placeholder="请选择结束时间"
/>
Js代码
data() {
return {
queryParam: {
createTime_begin: '',
createTime_end: '',
}
}
},
methods: {
/**
* 开始时间禁用选择
*/
disabledDateBegin(current) {
if (!this.queryParam.createTime_end) {
return false
}
// 转换为时间戳再进行比较
return current && (new Date(current.format('YYYY-MM-DD'))).getTime() > (new Date(this.queryParam.createTime_end)).getTime()
},
/**
* 结束时间禁用选择
*/
disabledDateEnd(current) {
if (!this.queryParam.createTime_begin) {
return false
}
// 转换为时间戳再进行比较
return current && (new Date(current.format('YYYY-MM-DD'))).getTime() < (new Date(this.queryParam.createTime_begin)).getTime()
}
}