jeecggboot form表单的 component: 'RangePicker' 时间回显格式是啥
时间: 2023-12-14 09:37:11 浏览: 80
antd form表单数据回显操作
5星 · 资源好评率100%
Ant Design 中的 `RangePicker` 组件默认返回的时间格式为 `Moment.js` 对象数组,其中一个 Moment 对象表示起始时间,另一个 Moment 对象表示结束时间。如果你需要在表单中回显这个时间范围,可以使用 Moment.js 的 `format()` 方法将 Moment 对象转换为指定格式的字符串。
下面是一个示例代码,展示了如何将 `RangePicker` 组件中选择的时间范围以指定的格式回显到表单的文本框中:
```jsx
import { Form, DatePicker } from 'antd';
import moment from 'moment';
const dateFormat = 'YYYY-MM-DD';
function MyForm() {
const [form] = Form.useForm();
// 初始化表单数据
const initialValues = {
rangeTime: [moment('2021-01-01', dateFormat), moment('2021-01-31', dateFormat)],
};
return (
<Form form={form} initialValues={initialValues}>
<Form.Item name="rangeTime" label="时间范围">
<DatePicker.RangePicker format={dateFormat} />
</Form.Item>
<Form.Item name="rangeTimeString" label="时间范围(字符串)">
<input value={form.getFieldValue('rangeTime').map(m => m.format(dateFormat)).join(' ~ ')} readOnly />
</Form.Item>
</Form>
);
}
export default MyForm;
```
这里我们使用 `moment()` 函数创建了两个 Moment 对象,分别表示时间范围的起始和结束时间。在 `DatePicker.RangePicker` 组件中,我们设置了 `format` 属性为 `'YYYY-MM-DD'`,表示用户选择的时间范围以此格式返回。在最后一个表单项中,我们使用 `form.getFieldValue('rangeTime')` 获取用户选择的时间范围,并使用 `map()` 方法将每个 Moment 对象转换为指定格式的字符串,最后使用 `join()` 方法将起始和结束时间用 `' ~ '` 连接起来,显示在一个文本框中。
阅读全文