From 52e3511192e3252119ae16528dd40b36a1606283 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Fri, 28 Oct 2016 11:29:26 +0800
Subject: [PATCH] docs: add demo for using time-related in form, close: #3610

---
 components/form/demo/form-controls.md         | 98 -------------------
 components/form/demo/mix.md                   |  2 +-
 components/form/demo/time-related-controls.md | 92 +++++++++++++++++
 3 files changed, 93 insertions(+), 99 deletions(-)
 delete mode 100644 components/form/demo/form-controls.md
 create mode 100644 components/form/demo/time-related-controls.md

diff --git a/components/form/demo/form-controls.md b/components/form/demo/form-controls.md
deleted file mode 100644
index 161afca467..0000000000
--- a/components/form/demo/form-controls.md
+++ /dev/null
@@ -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);
-````
diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md
index a8dfe09d79..9f6932cce8 100644
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title:
   zh-CN: 表单组合
   en-US: Mix
diff --git a/components/form/demo/time-related-controls.md b/components/form/demo/time-related-controls.md
new file mode 100644
index 0000000000..a390f81e1f
--- /dev/null
+++ b/components/form/demo/time-related-controls.md
@@ -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);
+````