





















Form.Item 的 name 只支持单个值。对于 RangePicker 返回的日期范围,有以下几种方案:
<Form.Item label="日期范围" name="dateRange" rules={[{ required: true }]}> <DatePicker.RangePicker style={{ width: "100%" }} /> </Form.Item> // onFinish 中拆分 const onFinish = (values: any) => { const [startDate, endDate] = values.dateRange || []; const payload = { ...values, start_date: startDate?.format('YYYY-MM-DD'), end_date: endDate?.format('YYYY-MM-DD'), }; delete payload.dateRange; console.log(payload); };
<Form.Item label="日期范围"> <DatePicker.RangePicker style={{ width: "100%" }} onChange={(dates) => { form.setFieldsValue({ start_date: dates?.[0]?.format('YYYY-MM-DD'), end_date: dates?.[1]?.format('YYYY-MM-DD'), }); }} /> </Form.Item> {/* 两个隐藏字段存真实值 */} <Form.Item name="start_date" hidden><Input /></Form.Item> <Form.Item name="end_date" hidden><Input /></Form.Item>
getValueFromEvent + normalize 转换<Form.Item label="日期范围" name="dateRange" normalize={(value) => { if (!value) return undefined; return value.map((v: any) => v?.format('YYYY-MM-DD')); }} getValueProps={(value) => ({ value: value ? value.map((v: string) => dayjs(v, 'YYYY-MM-DD')) : undefined })} > <DatePicker.RangePicker style={{ width: "100%" }} /> </Form.Item> // onFinish 中拿到的就是 ['2026-04-01', '2026-04-09'] // 再拆分: const onFinish = (values: any) => { const [start_date, end_date] = values.dateRange || []; // ... };
| 方案 | 优点 | 缺点 |
|---|---|---|
推荐方案1,简单清晰,在 onFinish 里一行拆开即可。
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。