Antd-RangePicker的日期范围限制

612 阅读1分钟

日期范围选择# 关于Antd-RangePicker的 开始结束联动限制

代码中需求是限制-开始和结束区间为2个月内,dayjs条件可灵活更改为,区间为年月日,数值改为想要的数量即可

onOpenChange方法,可用于多个日期选择器使用

<a-range-picker v-model:value="plannedSettleTimeAll" :disabled-date="disabledDate" value-format="YYYY-MM-DD" class="width-picker" @calendarChange="calendarPriceRangeChange" @openChange="onOpenChange($event,plannedSettleTimeAll)" />

const selectCurrentDate  = ref([]);
function onOpenChange(val,e) {
  if (val) {
    selectCurrentDate.value = e
  }
}
function calendarPriceRangeChange(date,val,rang) {
  if (date && date.length >= 1) {
    if (rang.range === 'start') {
      selectCurrentDate.value = [date[0]]
    }
    if (rang.range === 'end') {
      selectCurrentDate.value = [date[0],date[1]]
    }
  } else {
    selectCurrentDate.value = null
  }
}
function disabledDate(current) {
  if (!selectCurrentDate.value) { 
    return false;   // 开始和结束日期都未选则所有日期都可选
  }
  // 如果优先选择开始日期,利用dayjs的diff计算可选日期和开始时间的差值,返回boolean类型
  const tooLate = selectCurrentDate.value[0] && dayjs(current).diff(selectCurrentDate.value[0], 'months') >= 2 
  // 如果优先选择结束日期,利用dayjs的diff计算可选日期和开始时间的差值,返回boolean类型
  const tooEarly = selectCurrentDate.value[1] && dayjs(selectCurrentDate.value[1]).diff(current, 'month') >= 2
  return !!tooEarly || !!tooLate; 
}