Ant vue range-picker实现时间选择范围
时间选择范围,实现最大选择一个月html<a-range-pickerinputReadOnly@openChange="openChange"@calendarChange="calendarChange":disabled-date="disabledDate"v-model="rangeTime"@change="changePicker"format="YYYY-MM-DD">
·
时间选择范围,实现最大选择一个月
html
<a-range-picker
inputReadOnly
@openChange="openChange"
@calendarChange="calendarChange"
:disabled-date="disabledDate"
v-model="rangeTime"
@change="changePicker"
format="YYYY-MM-DD">
</a-range-picker>
JavaScript
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
}
},
更多推荐
已为社区贡献7条内容
所有评论(0)