直播平台源代码，时间范围(range-picker)自定义时间段范围

直播平台源代码，时间范围(range-picker)自定义时间段范围

 

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天
})

 

以上就是 直播平台源代码，时间范围(range-picker)自定义时间段范围，更多内容欢迎关注之后的文章