表单有个起始日期和结束日期,要求有前后关系,怎么样才能交叉验证。
我遇到的问题是:
step1: 先设置开始日期为3/23
step2: 设置结束如期为3/21,结束日期组件验证提示“不能晚于开始日期,bulabula”
step3: 再次设置开始时间未3/20, 结束日期的组件还是提示 “不能晚于开始日期,bulabula”
理想的,在step3的时候设置了开始时间,那么结束日期也要再次验证。
我考虑的第一个想法:
1. 在开始日期的validator中触发‘结束日期的validator'。 但是不知道怎么调用,直接调用this.toDateSelect(null, toMoment, callback) 发现根本不触发。
还请大神们指正,谢谢!
我的代码如下:
render 部分
<Col span={6}>
<FormItem
{...formItemLayout}
label="费用期间"
>
{getFieldDecorator('costDateFrom', {
initialValue: null,
rules: [
{ required: true, message: '请输入费用期间开始' },
{ validator: this.fromDateSelect},
]
})(
<DatePicker disabled={disabledEdit} format="YYYY-MM-DD" />
)}
</FormItem>
</Col>
<Col span={6}>
<FormItem
{...formItemLayout}
label="到"
>
{getFieldDecorator('costDateTo', {
initialValue: null,
rules: [
{ required: true, message: '请输入费用期间结束' },
{ validator: this.toDateSelect},
]
})(
<DatePicker disabled={disabledEdit} format="YYYY-MM-DD" />
)}
</FormItem>
</Col>
验证函数
fromDateSelect(rule, fromMoment, callback) {
const { getFieldValue } = this.props.form;
const toMoment = getFieldValue('costDateTo');
// 结束如期必须必起始日期大
if (!toMoment || !fromMoment) {
return callback()
}
if (toMoment.isBefore(fromMoment, 'day')) {
return callback('开始时间不能在结束日期之后')
}
try{
this.toDateSelect(null, toMoment, callback)
} catch(e) {
console.log(e)
}
return callback()
}
toDateSelect(rule, toMoment, callback) {
const { getFieldValue } = this.props.form;
const fromMoment = getFieldValue('costDateFrom');
// 结束如期必须必起始日期大
if (!toMoment || !fromMoment) {
return callback()
}
if (toMoment.isBefore(fromMoment, 'day')) {
return callback('结束日期不能在开始日期之前')
}
return callback()
}