Ant vue range-picker实现时间选择范围

1,520 阅读1分钟

时间选择范围,实现最大选择一个月

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 ? a : []
},
// 处理打开日期面板事件
openChange (val) {
  if (val) {
    this.selectCurrentDate = this.rangeTime.length ? this.rangeTime[0] : null
  }
  // 清空禁用时间段的设置(再次选择清空禁用的的时间)
  // this.selectCurrentDate = 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
  }
},


/**
 * 2、时间限制范围 结束时间不能超过今天
 */
/* disabledDate (current) {
  return current < moment().subtract(31, 'days').startOf('day') || current > moment().endOf('day')
}, */