ant design vue时间范围(range-picker)自定义时间段范围
【代码】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即可
- 你如果需要禁用n天,这里只需要传入
/* 禁用时间 */ 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
就可以
- 禁止选择今天和之后的日期
更多推荐
已为社区贡献7条内容
所有评论(0)