react+antd 开始时间与截止时间的验证
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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <Form.Item label= "开始时间" > {getFieldDecorator( 'planStartTime' , { rules: [ { validator(_, value, callback) { if (value && form.getFieldValue( 'planEndTime' )) { const endTime = form .getFieldValue( 'planEndTime' ) .format( endMode === 'date' ? 'YYYY-MM-DD 23:59:59' : 'YYYY-MM-DD HH:mm:ss' ); const newValue = value.format( startMode === 'date' ? 'YYYY-MM-DD 00:00:00' : 'YYYY-MM-DD HH:mm:ss' ); if (endTime && moment(newValue) > moment(endTime)) { return callback( '不可大于截止时间' ); } return callback(); } return callback(); } } ], initialValue: getPath(state, 'taskParam.planStartTime' ) ? moment(getPath(state, 'taskParam.planStartTime' )) : null })( <DatePicker style={{ width: '100%' }} showTime placeholder= "请输入开始时间" format={startMode === 'date' ? 'MM-DD' : 'MM-DD HH:mm' } onOk={e => handleTime(e, 'start' )} onChange={(e1, e2) => handleTimeChange(e1, e2, 'start' )} onPanelChange={(e1, e2) => handleTimePanel(e1, e2, 'start' )} /> )} </Form.Item> <Form.Item label= "截止时间" > {getFieldDecorator( 'planEndTime' , { rules: [ { required: true , message: '请输入截止时间' }, { validator(_, value, callback) { if (value && form.getFieldValue( 'planStartTime' )) { const startTime = form .getFieldValue( 'planStartTime' ) .format( startMode === 'date' ? 'YYYY-MM-DD 00:00:00' : 'YYYY-MM-DD HH:mm:ss' ); const newValue = value.format( endMode === 'date' ? 'YYYY-MM-DD 23:59:59' : 'YYYY-MM-DD HH:mm:ss' ); if (startTime && moment(newValue) < moment(startTime)) { return callback( '不可小于开始时间' ); } return callback(); } return callback(); } } ], initialValue: getPath(state, 'taskParam.planEndTime' ) ? moment(getPath(state, 'taskParam.planEndTime' )) : null })( <DatePicker style={{ width: '100%' }} showTime placeholder= "请输入截止时间" format={endMode === 'date' ? 'MM-DD' : 'MM-DD HH:mm' } onOk={e => handleTime(e, 'end' )} onChange={(e1, e2) => handleTimeChange(e1, e2, 'end' )} onPanelChange={(e1, e2) => handleTimePanel(e1, e2, 'end' )} /> )} </Form.Item> |
↑表单项内判断开始时间是否小于结束时间
↓两个日期表单项需要有两种展示方式【当用户只选择到日期-展示日期;当用户选择到时间-展示时间】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | const handleTime = (value, type) => { if (type === 'start' ) { setStartDate(value.format(startMode === 'date' ? 'YYYY-MM-DD 00:00:00' : 'YYYY-MM-DD HH:mm:ss' )); } else { setEndDate(value.format(endMode === 'date' ? 'YYYY-MM-DD 23:59:59' : 'YYYY-MM-DD HH:mm:ss' )); } }; const handleTimePanel = (value, mode, type) => { if (type === 'start' ) { setStartMode(mode); } else { setEndMode(mode); } }; const handleTimeChange = (date, dateString, type) => { if (!dateString) { if (type === 'start' ) { setStartDate( '' ); } else { setEndDate( '' ); } } }; |
↓相关hooks
1 2 3 4 5 6 7 8 9 10 11 12 13 | const [startMode, setStartMode] = useState( getPath(state, 'taskParam.planStartTime' ) && getPath(state, 'taskParam.planStartTime' ).indexOf( '00:00:00' ) === -1 ? 'time' : 'date' ); const [endMode, setEndMode] = useState( getPath(state, 'taskParam.planEndTime' ) && getPath(state, 'taskParam.planEndTime' ).indexOf( '23:59:59' ) === -1 ? 'time' : 'date' ); const [startDate, setStartDate] = useState( '' ); const [endDate, setEndDate] = useState( '' ); |
↓提交表单时param修改
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | const params = { ...values, id: 0, planStartTime: startDate || (values.planStartTime && values.planStartTime.format( startMode === 'date' ? 'YYYY-MM-DD 00:00:00' : 'YYYY-MM-DD HH:mm:ss' )) || '' , planEndTime: endDate || (values.planEndTime && values.planEndTime.format( endMode === 'date' ? 'YYYY-MM-DD 23:59:59' : 'YYYY-MM-DD HH:mm:ss' )) || '' }; |
分类:
react从入门到放弃
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!