ant design vue时间范围(range-picker)自定义时间段范围

需求

• 最近有这么一个要求
• 选取时间的时候,禁止选择今天和之后的日期(因为可能没有数据嘛)

• 选取的时间区间端不能超过30天

做法

• 使用a-range-picker

• 添加以下属性

  • v-model:value="searchForm.dataTime"选取的值记录
  • value-format="YYYY-MM-DD"可选,值的格式
  • :disabledDate="disabledDateHandler"不可选择的日期(日期当中的每一天都会调用这个函数)
  • @calendarChange="dates => dateCalc.selectDateTime = dates[0]"待选日期发生变化的回调也就是我们每一次点击选择日期,就会调用一下这一个函数,这里作用是记录下第一个选择的日期时间(也就是日期开始的时间)
  • @openChange="_ => dateCalc.selectDateTime = ''"弹出日历和关闭日历的回调,这里弹出或者关闭日期选择的时候清空下之前记录日期开始值
  • @change="dateCalc.selectDateTime = ''"时间发生变化的回调,也就是开始时间,结束时间都选取完成后执行的回调
  • :ranges="timeScopedPre"选取预设,可选(比如点击一下就可以选取7天,14天,30天的预设)

  import moment from "moment";
  <a-range-picker
            v-model:value="searchForm.dataTime"
            value-format="YYYY-MM-DD"
            :disabledDate="disabledDateHandler"
            @calendarChange="dates => dateCalc.selectDateTime = dates[0]"
            @change="dateCalc.selectDateTime = ''"
            @openChange="_ => dateCalc.selectDateTime = ''"
            :ranges="timeScopedPre"
          />
    
  
  const searchForm = ref<SearchFormTypes>({
    dataTime:[moment().subtract(7,'days').format('YYYY-MM-DD'),moment().subtract(1,'days').format('YYYY-MM-DD')] //数据时间 默认前七天
  });
  
  //计算日期相关数据
  const dateCalc = ref<any>({
    selectDateTime:"",//计算日期数据-限制30天
  })
  
  const timeScopedPre = shallowRef<any>({
    '近七日':[moment().subtract(7,'d'),moment().subtract(1,'d')],
    '近14日':[moment().subtract(14,'d'),moment().subtract(1,'d')],
    '近30日':[moment().subtract(30,'d'),moment().subtract(1,'d')],
  })
  
  /* 禁用时间 */
  const disabledDateHandler = (current) => {
    if(dateCalc.value.selectDateTime){
        //这里实现下面功能
        //只能选取30天,这里需要填写29,不然会出现多出来了一天的情况
        //和禁止选择今天和之后的日期
      return current > moment(dateCalc.value.selectDateTime).add(29,'days') ||
            current < moment(dateCalc.value.selectDateTime).subtract(29,'days') ||
            current > moment().subtract(1,'days').endOf('day')
    }else {
        //这里实现下面功能
        //禁止选择今天和之后的日期
         return current > moment().subtract(1,'days').endOf('day');
    }
  }

• 属性值一些说明

  • timeScopedPre:时间预设

  import moment from "moment";
  //时间范围预设
  const timeScopedPre = shallowRef<any>({
    '近七日':[moment().subtract(7,'d'),moment().subtract(1,'d')],
    '近14日':[moment().subtract(14,'d'),moment().subtract(1,'d')],
    '近30日':[moment().subtract(30,'d'),moment().subtract(1,'d')],
  })

  • disabledDateHandler函数
    • 你如果需要禁用n天,这里只需要传入n-1就可以,比如禁用180天,这里把29改为179即可

  /* 禁用时间 */
  const disabledDateHandler = (current) => {
    if(dateCalc.value.selectDateTime){
        //这里实现下面功能
        //只能选取30天,这里需要填写29,不然会出现多出来了一天的情况
        //和禁止选择今天和之后的日期
      return current > moment(dateCalc.value.selectDateTime).add(29,'days') ||
            current < moment(dateCalc.value.selectDateTime).subtract(29,'days') ||
            current > moment().subtract(1,'days').endOf('day')
    }else {
        //这里实现下面功能
        //禁止选择今天和之后的日期
         return current > moment().subtract(1,'days').endOf('day');
    }
  }

  • searchForm值

  import moment from "moment";
  const searchForm = ref<SearchFormTypes>({
    dataTime:[moment().subtract(7,'days').format('YYYY-MM-DD'),moment().subtract(1,'days').format('YYYY-MM-DD')] //数据时间 默认前七天
  });

  • dateCalc值

  //计算日期相关数据
  const dateCalc = ref<any>({
    selectDateTime:"",//计算日期数据-限制30天
  })

disabledDateHandler函数禁用原理讲解

• 禁用30天原理,当然,你如果需要禁用n天,这里只需要传入n-1就可以

• 禁止选择今天和之后的日期