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'                                 )) ||                             ''                     };