mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
docs: add demo for using time-related in form, close: #3610
This commit is contained in:
Benjy Cui
parent
9d218860b5
commit
52e3511192
@ -1,98 +0,0 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 表单控件
|
||||
en-US: Form controls
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
展示所有支持的表单控件。
|
||||
|
||||
**注**： 输入框：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
|
||||
|
||||
## en-US
|
||||
|
||||
A list off all the controls that can be used with form.
|
||||
|
||||
**Note**: Input control: Only if set correct type for it, then it will be set correct style.
|
||||
|
||||
````jsx
|
||||
import { Form, Input, Select, Checkbox, Radio } from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
function handleSelectChange(value) {
|
||||
console.log(`selected ${value}`);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Form horizontal>
|
||||
<FormItem
|
||||
id="control-input"
|
||||
label="input control"
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 14 }}
|
||||
>
|
||||
<Input id="control-input" placeholder="Please enter..." />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
id="control-textarea"
|
||||
label="text area"
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 14 }}
|
||||
>
|
||||
<Input type="textarea" id="control-textarea" rows="3" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
id="select"
|
||||
label="Select box"
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 14 }}
|
||||
>
|
||||
<Select id="select" size="large" defaultValue="lucy" style={{ width: 200 }} onChange={handleSelectChange}>
|
||||
<Option value="jack">Jack</Option>
|
||||
<Option value="lucy">Lucy</Option>
|
||||
<Option value="disabled" disabled>disabled</Option>
|
||||
<Option value="yiminghe">Yiminghe</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Checkbox"
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 18 }}
|
||||
>
|
||||
<Checkbox className="ant-checkbox-vertical">item 1</Checkbox>
|
||||
<Checkbox className="ant-checkbox-vertical">item 2</Checkbox>
|
||||
<Checkbox className="ant-checkbox-vertical" disabled>item 3 (disabled)</Checkbox>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Checkbox"
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 18 }}
|
||||
>
|
||||
<Checkbox className="ant-checkbox-inline">item 1</Checkbox>
|
||||
<Checkbox className="ant-checkbox-inline">item 2</Checkbox>
|
||||
<Checkbox className="ant-checkbox-inline">item 3</Checkbox>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Radio"
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 18 }}
|
||||
>
|
||||
<RadioGroup defaultValue="b">
|
||||
<Radio value="a">A</Radio>
|
||||
<Radio value="b">B</Radio>
|
||||
<Radio value="c">C</Radio>
|
||||
<Radio value="d">D</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</Form>
|
||||
, mountNode);
|
||||
````
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 5
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 表单组合
|
||||
en-US: Mix
|
||||
|
||||
92
components/form/demo/time-related-controls.md
Normal file
92
components/form/demo/time-related-controls.md
Normal file
@ -0,0 +1,92 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 时间类控件
|
||||
en-US: Time-related Controls
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
`antd@2.0` 之后，时间类组件的 `value` 改为 `moment` 类型，所以在提交前需要预处理。
|
||||
|
||||
## en-US
|
||||
|
||||
After `antd@2.0`, the `value` of time-related components had been changed to `moment`. So, we need to pre-process those values.
|
||||
|
||||
````jsx
|
||||
import { Form, DatePicker, TimePicker, Row, Col, Button } from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
const MonthPicker = DatePicker.MonthPicker;
|
||||
const RangePicker = DatePicker.RangePicker;
|
||||
|
||||
const TimeRelatedForm = Form.create()(React.createClass({
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const fieldsValue = this.props.form.getFieldsValue();
|
||||
|
||||
// Should format date value before submit.
|
||||
const rangeValue = fieldsValue['range-picker'];
|
||||
const values = {
|
||||
...fieldsValue,
|
||||
'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
|
||||
'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
|
||||
'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
|
||||
'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
|
||||
};
|
||||
console.log('Received values of form: ', values);
|
||||
},
|
||||
render() {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
const formItemLayout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 14 },
|
||||
};
|
||||
return (
|
||||
<Form horizontal onSubmit={this.handleSubmit}>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="DatePicker"
|
||||
>
|
||||
{getFieldDecorator('date-picker')(
|
||||
<DatePicker />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="MonthPicker"
|
||||
>
|
||||
{getFieldDecorator('month-picker')(
|
||||
<MonthPicker />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="RangePicker"
|
||||
>
|
||||
{getFieldDecorator('range-picker')(
|
||||
<RangePicker />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="TimePicker"
|
||||
>
|
||||
{getFieldDecorator('time-picker')(
|
||||
<TimePicker />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Row>
|
||||
<Col span={14} offset={6}>
|
||||
<Button type="primary" htmlType="submit" size="large">Submit</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
},
|
||||
}));
|
||||
|
||||
ReactDOM.render(<TimeRelatedForm />, mountNode);
|
||||
````
|
||||
Loading…
Reference in New Issue
Block a user