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

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

 

1

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

​

属性值一些说明

 

1

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

 

 

disabledDateHandler函数

 

1

你如果需要禁用n天,这里只需要传入n-1就可以,比如禁用180天,这里把29改为179即可<br>/* 禁用时间 */<br>const disabledDateHandler = (current) => {<br>  if(dateCalc.value.selectDateTime){<br>      //这里实现下面功能<br>      //只能选取30天,这里需要填写29,不然会出现多出来了一天的情况<br>      //和禁止选择今天和之后的日期<br>    return current > moment(dateCalc.value.selectDateTime).add(29,'days') ||<br>          current < moment(dateCalc.value.selectDateTime).subtract(29,'days') ||<br>          current > moment().subtract(1,'days').endOf('day')<br>  }else {<br>      //这里实现下面功能<br>      //禁止选择今天和之后的日期<br>       return current > moment().subtract(1,'days').endOf('day');<br>  }<br>}

 

searchForm值

 

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

 

dateCalc值

 

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

 

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