[Ant Design Vue] a-range-picker 禁用时间段

作者 : admin 本文共714个字,预计阅读时间需要2分钟 发布时间: 2024-06-11 共1人阅读
<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实现时间选择范围

本站无任何商业行为
个人在线分享 » [Ant Design Vue] a-range-picker 禁用时间段
E-->