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

需求

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

ant design vue时间范围(range-picker)自定义时间段范围_第1张图片

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

ant design vue时间范围(range-picker)自定义时间段范围_第2张图片

做法

  • 使用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就可以

ant design vue时间范围(range-picker)自定义时间段范围_第3张图片

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

ant design vue时间范围(range-picker)自定义时间段范围_第4张图片

你可能感兴趣的:(antd,vue,vue.js,前端,javascript)