You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.8 KiB
94 lines
2.8 KiB
5 years ago
|
---
|
||
|
|
order: 16
|
||
|
|
title:
|
||
|
|
zh-CN: 时间类控件
|
||
|
|
en-US: Time-related Controls
|
||
|
|
---
|
||
|
|
|
||
|
|
## zh-CN
|
||
|
|
|
||
|
|
时间类组件的 `value` 类型为 `moment` 对象，所以在提交服务器前需要预处理。
|
||
|
|
|
||
|
|
## en-US
|
||
|
|
|
||
|
|
The `value` of time-related components is a `moment` object, which we need to pre-process it before we submit to server.
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { Form, DatePicker, TimePicker, Button } from 'antd';
|
||
|
|
|
||
|
|
const { MonthPicker, RangePicker } = DatePicker;
|
||
|
|
|
||
|
|
const formItemLayout = {
|
||
|
|
labelCol: {
|
||
|
|
xs: { span: 24 },
|
||
|
|
sm: { span: 8 },
|
||
|
|
},
|
||
|
|
wrapperCol: {
|
||
|
|
xs: { span: 24 },
|
||
|
|
sm: { span: 16 },
|
||
|
|
},
|
||
|
|
};
|
||
|
|
const config = {
|
||
|
|
rules: [{ type: 'object', required: true, message: 'Please select time!' }],
|
||
|
|
};
|
||
|
|
const rangeConfig = {
|
||
|
|
rules: [{ type: 'array', required: true, message: 'Please select time!' }],
|
||
|
|
};
|
||
|
|
|
||
|
|
const TimeRelatedForm = () => {
|
||
|
|
const onFinish = fieldsValue => {
|
||
|
|
// Should format date value before submit.
|
||
|
|
const rangeValue = fieldsValue['range-picker'];
|
||
|
|
const rangeTimeValue = fieldsValue['range-time-picker'];
|
||
|
|
const values = {
|
||
|
|
...fieldsValue,
|
||
|
|
'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
|
||
|
|
'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
|
||
|
|
'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
|
||
|
|
'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
|
||
|
|
'range-time-picker': [
|
||
|
|
rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
|
||
|
|
rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
|
||
|
|
],
|
||
|
|
'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
|
||
|
|
};
|
||
|
|
console.log('Received values of form: ', values);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Form name="time_related_controls" {...formItemLayout} onFinish={onFinish}>
|
||
|
|
<Form.Item name="date-picker" label="DatePicker" {...config}>
|
||
|
|
<DatePicker />
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item name="date-time-picker" label="DatePicker[showTime]" {...config}>
|
||
|
|
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item name="month-picker" label="MonthPicker" {...config}>
|
||
|
|
<MonthPicker />
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item name="range-picker" label="RangePicker" {...rangeConfig}>
|
||
|
|
<RangePicker />
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item name="range-time-picker" label="RangePicker[showTime]" {...rangeConfig}>
|
||
|
|
<RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item name="time-picker" label="TimePicker" {...config}>
|
||
|
|
<TimePicker />
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item
|
||
|
|
wrapperCol={{
|
||
|
|
xs: { span: 24, offset: 0 },
|
||
|
|
sm: { span: 16, offset: 8 },
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Button type="primary" htmlType="submit">
|
||
|
|
Submit
|
||
|
|
</Button>
|
||
|
|
</Form.Item>
|
||
|
|
</Form>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
ReactDOM.render(<TimeRelatedForm />, mountNode);
|
||
|
|
```
|