[Ant Design Vue] a-range-picker 禁用时间段
<a-range-picker
inputReadOnly
@openChange="openChange"
@calendarChange="calendarChange"
:disabled-date="disabledDate"
v-model="rangeTime"
@change="changePicker"
format="YYYY-MM-DD">
</a-range-picker>
changePicker (a, b) {
this.rangeTime= a.length ? b : []
},
// 处理打开日期面板事件
openChange (val) {
if (val) {
this.selectCurrentDate = this.rangeTime.length ? this.rangeTime[0] : null
}
},
// 设置禁用时间段
disabledDate (current, date) {
if (this.selectCurrentDate != null) {
// 在开始时间的前后范围31天
return current < moment(this.selectCurrentDate).add(-30, 'days') || current > moment(this.selectCurrentDate).add(30, 'days')
}
return false
},
// 点击面板时间事件
calendarChange (date, dateString) {
if (date.length <= 1) {
this.selectCurrentDate = date[0]
} else {
this.selectCurrentDate = null
}
},
参考:
Ant vue range-picker实现时间选择范围