ant组件DatePicker 日期选择框动态设置日期可选择范围不超过31天
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 | <a-range-picker v-model:value= "searchData.date" :format= "'YYYY-MM-DD'" :placeholder= "['开始日期', '结束日期']" :allow-clear= "false" :disabled-date= "disabledDate" @calendarChange= "calendarChange" @blur= "blurDate" /> const startDate = ref<any>(); const calendarChange = (dates) => { startDate.value = dates; }; const disabledDate = (current: Moment) => { if (startDate.value && startDate.value[0]) { return ( current < moment(startDate.value[0]).subtract(31, "days" ) || current > moment(startDate.value[0]).add(31, "days" ) ); } else { return false ; } }; const blurDate = () => { startDate.value = undefined; }; |
首先calendarChange 函数获取到时间选择框的点击时间的变化并回调数据存入startDate中,然后disabledDate 函数根据moment(startDate.value[0])获取到选择的开始时间,并根据该时间向前后各扩大31天,超出31天的时间禁用。最后使用blurDate函数在失去焦点的时候重置startDate数据,使下次再选择时间的时候对开始时间不限制选择范围
分类:
Ant Design
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了