antd限制开始时间与结束时间范围是30天,并不能选择当前日期之后的日期 vue3(默认展示近7天)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <a-range-picker :value= "hackValue || dateArr" :disabled-date= "disabledDate" style= "width: 240px" separator= "~" :allow-clear= "false" @change= "onChange" @openChange= "onOpenChange" @calendarChange= "onCalendarChange" /> type RangeValue = [Dayjs, Dayjs]; let dateArr = ref<RangeValue>([ dayjs(dayjs().subtract(7, 'day' )), dayjs(dayjs()), ]); const dates = ref<RangeValue>(); const hackValue = ref<RangeValue>(); const disabledDate = (current: Dayjs) => { if (!dates.value || (dates.value as any).length === 0) { return current && current > dayjs().endOf( 'day' ); } const tooLate = dates.value[0] && current.diff(dates.value[0], 'days' ) > 30; const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days' ) > 30; return tooEarly || tooLate || current > dayjs().endOf( 'day' ); }; const onOpenChange = (open: boolean) => { if (open) { dates.value = [] as any; hackValue.value = [] as any; } else { hackValue.value = undefined; } }; const onChange = (val: RangeValue) => { dateArr.value = val; // 获取接口 }; const onCalendarChange = (val: RangeValue) => { dates.value = val; }; |
标签:
日期范围选择器
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现