Datepicker => DatePicker, Timepicker => TimePicker

README-zh_CN.md

@@ -26,15 +26,15 @@ npm install antd
 - 使用全部组件
 
   ```jsx
-  import { Datepicker } from 'antd';
-  ReactDOM.render(<Datepicker />, mountNode);
+  import { DatePicker } from 'antd';
+  ReactDOM.render(<DatePicker />, mountNode);
   ```
 
 - 按需使用
 
   ```jsx
-  import Datepicker from 'antd/lib/datepicker';
-  ReactDOM.render(<Datepicker />, mountNode);
+  import DatePicker from 'antd/lib/date-picker';
+  ReactDOM.render(<DatePicker />, mountNode);
   ```
 
 引入样式：

README.md

@@ -25,15 +25,15 @@ npm install antd
 - Use all components
 
   ```jsx
-  import { Datepicker } from 'antd';
-  ReactDOM.render(<Datepicker />, mountNode);
+  import { DatePicker } from 'antd';
+  ReactDOM.render(<DatePicker />, mountNode);
   ```
 
 - Use on demand
 
   ```jsx
-  import Datepicker from 'antd/lib/datepicker';
-  ReactDOM.render(<Datepicker />, mountNode);
+  import DatePicker from 'antd/lib/date-picker';
+  ReactDOM.render(<DatePicker />, mountNode);
   ```
 
 Import style:

components/calendar/locale/en_US.js

@@ -1 +1 @@
-module.exports = require('../../datepicker/locale/en_US');
+module.exports = require('../../date-picker/locale/en_US');

components/calendar/locale/zh_CN.js

@@ -1 +1 @@
-module.exports = require('../../datepicker/locale/zh_CN');
+module.exports = require('../../date-picker/locale/zh_CN');

components/date-picker/demo/basic.md

@@ -0,0 +1,15 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+ReactDOM.render(
+  <DatePicker defaultValue="2015-12-12" />
+, document.getElementById('components-date-picker-demo-basic'));
+````

components/date-picker/demo/disabled.md

@@ -0,0 +1,15 @@
+# 禁用
+
+- order: 5
+
+选择框的不可用状态。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+ReactDOM.render(
+  <DatePicker defaultValue="2015-06-06" disabled />
+, document.getElementById('components-date-picker-demo-disabled'));
+````

components/date-picker/demo/formatter.md

@@ -0,0 +1,15 @@
+# 日期格式
+
+- order: 1
+
+使用 `format` 属性，可以自定义你需要的日期显示格式，如 `yyyy/MM/dd`。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+ReactDOM.render(
+  <DatePicker defaultValue="2015/01/01" format="yyyy/MM/dd" />
+, document.getElementById('components-date-picker-demo-formatter'));
+````

components/datepicker/demo/locale.md → components/date-picker/demo/locale.md

@@ -7,8 +7,8 @@
 ---
 
 ````jsx
-import { Datepicker } from 'antd';
-import enUS from 'antd/lib/datepicker/locale/en_US';
+import { DatePicker } from 'antd';
+import enUS from 'antd/lib/date-picker/locale/en_US';
 import assign from 'object-assign';
 
 const App = React.createClass({
@@ -22,10 +22,10 @@ const App = React.createClass({
     };
   },
   render() {
-    return <Datepicker locale={this.state.locale} />;
+    return <DatePicker locale={this.state.locale} />;
   }
 });
 
-ReactDOM.render(<App />, document.getElementById('components-datepicker-demo-locale'));
+ReactDOM.render(<App />, document.getElementById('components-date-picker-demo-locale'));
 ````
 

components/date-picker/demo/month-picker.md

@@ -0,0 +1,15 @@
+# 月选择器
+
+- order: 9
+
+使用 MonthPicker 实现月选择器.
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+const MonthPicker = DatePicker.MonthPicker;
+ReactDOM.render(
+  <MonthPicker defaultValue="2015-12" />
+, document.getElementById('components-date-picker-demo-month-picker'));
+````

components/datepicker/demo/range.md → components/date-picker/demo/range.md

@@ -9,7 +9,7 @@
 ---
 
 ````jsx
-import { Datepicker } from 'antd';
+import { DatePicker } from 'antd';
 
 const disabledDate = function(current, value) {
   // can not select days after today
@@ -17,6 +17,6 @@ const disabledDate = function(current, value) {
 };
 
 ReactDOM.render(
-  <Datepicker disabledDate={disabledDate} />
-, document.getElementById('components-datepicker-demo-range'));
+  <DatePicker disabledDate={disabledDate} />
+, document.getElementById('components-date-picker-demo-range'));
 ````

components/datepicker/demo/select.md → components/date-picker/demo/select.md

@@ -7,18 +7,18 @@
 ---
 
 ````jsx
-import { Datepicker } from 'antd';
+import { DatePicker } from 'antd';
 
 const Picker = React.createClass({
   handleChange: function(value) {
     console.log(new Date(value.getTime()));
   },
   render: function() {
-    return <Datepicker onChange={this.handleChange} />;
+    return <DatePicker onChange={this.handleChange} />;
   }
 });
 
 ReactDOM.render(
   <Picker />
-, document.getElementById('components-datepicker-demo-select'));
+, document.getElementById('components-date-picker-demo-select'));
 ````

components/date-picker/demo/size.md

@@ -0,0 +1,19 @@
+# 三种大小
+
+- order: 1
+
+三种大小的输入框，大的用在表单中，中的为默认。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <DatePicker size="large" />
+    <DatePicker />
+    <DatePicker size="small" />
+  </div>
+, document.getElementById('components-date-picker-demo-size'));
+````

components/datepicker/demo/start-end.md → components/date-picker/demo/start-end.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-import { Datepicker } from 'antd';
+import { DatePicker } from 'antd';
 
 const DateRange = React.createClass({
   getInitialState() {
@@ -36,11 +36,11 @@ const DateRange = React.createClass({
   },
   render() {
     return <div>
-      <Datepicker disabledDate={this.disabledStartDate}
+      <DatePicker disabledDate={this.disabledStartDate}
         value={this.state.startValue}
         placeholder="开始日期"
         onChange={this.onChange.bind(this, 'startValue')} />
-      <Datepicker disabledDate={this.disabledEndDate}
+      <DatePicker disabledDate={this.disabledEndDate}
         value={this.state.endValue}
         placeholder="结束日期"
         onChange={this.onChange.bind(this, 'endValue')} />
@@ -50,5 +50,5 @@ const DateRange = React.createClass({
 
 ReactDOM.render(
   <DateRange />
-, document.getElementById('components-datepicker-demo-start-end'));
+, document.getElementById('components-date-picker-demo-start-end'));
 ````

components/datepicker/demo/time.md → components/date-picker/demo/time.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-import { Datepicker, Timepicker } from 'antd';
+import { DatePicker, TimePicker } from 'antd';
 
 const DateTimePicker = React.createClass({
   handleChange(from, value) {
@@ -37,8 +37,8 @@ const DateTimePicker = React.createClass({
   },
   render() {
     return <div>
-      <Datepicker onChange={this.handleChange.bind(null, 'date')} />
-      <Timepicker onChange={this.handleChange.bind(null, 'time')} />
+      <DatePicker onChange={this.handleChange.bind(null, 'date')} />
+      <TimePicker onChange={this.handleChange.bind(null, 'time')} />
     </div>;
   }
 });
@@ -48,5 +48,5 @@ function onSelect(value) {
 }
 
 ReactDOM.render(<DateTimePicker onSelect={onSelect} />
-, document.getElementById('components-datepicker-demo-time'));
+, document.getElementById('components-date-picker-demo-time'));
 ````

components/datepicker/index.jsx → components/date-picker/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Calendar from 'rc-calendar';
 import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
-import Datepicker from 'rc-calendar/lib/Picker';
+import DatePicker from 'rc-calendar/lib/Picker';
 import GregorianCalendar from 'gregorian-calendar';
 import defaultLocale from './locale/zh_CN';
 import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
@@ -121,7 +121,7 @@ function createPicker(TheCalendar, defaultFormat) {
       }
 
       return <span className={pickerClass}>
-        <Datepicker
+        <DatePicker
           transitionName={this.props.transitionName}
           disabled={this.props.disabled}
           calendar={calendar}
@@ -147,7 +147,7 @@ function createPicker(TheCalendar, defaultFormat) {
                 );
             }
           }
-        </Datepicker>
+        </DatePicker>
       </span>;
     }
   });

components/datepicker/index.md → components/date-picker/index.md

@@ -1,4 +1,4 @@
-# Datepicker
+# DatePicker
 
 - category: Components
 - chinese: 日期选择框
@@ -15,7 +15,7 @@
 ## API
 
 ```html
-<Datepicker defaultValue="2015-01-01" />
+<DatePicker defaultValue="2015-01-01" />
 ```
 
 | 参数         | 说明           | 类型     | 默认值       |

components/datepicker/demo/basic.md

@@ -1,15 +0,0 @@
-# 基本
-
-- order: 0
-
-最简单的用法。
-
----
-
-````jsx
-import { Datepicker } from 'antd';
-
-ReactDOM.render(
-  <Datepicker defaultValue="2015-12-12" />
-, document.getElementById('components-datepicker-demo-basic'));
-````

components/datepicker/demo/disabled.md

@@ -1,15 +0,0 @@
-# 禁用
-
-- order: 5
-
-选择框的不可用状态。
-
----
-
-````jsx
-import { Datepicker } from 'antd';
-
-ReactDOM.render(
-  <Datepicker defaultValue="2015-06-06" disabled />
-, document.getElementById('components-datepicker-demo-disabled'));
-````

components/datepicker/demo/formatter.md

@@ -1,15 +0,0 @@
-# 日期格式
-
-- order: 1
-
-使用 `format` 属性，可以自定义你需要的日期显示格式，如 `yyyy/MM/dd`。
-
----
-
-````jsx
-import { Datepicker } from 'antd';
-
-ReactDOM.render(
-  <Datepicker defaultValue="2015/01/01" format="yyyy/MM/dd" />
-, document.getElementById('components-datepicker-demo-formatter'));
-````

components/datepicker/demo/month-picker.md

@@ -1,15 +0,0 @@
-# 月选择器
-
-- order: 9
-
-使用 MonthPicker 实现月选择器.
-
----
-
-````jsx
-import { Datepicker } from 'antd';
-const MonthPicker = Datepicker.MonthPicker;
-ReactDOM.render(
-  <MonthPicker defaultValue="2015-12" />
-, document.getElementById('components-datepicker-demo-month-picker'));
-````

components/datepicker/demo/size.md

@@ -1,19 +0,0 @@
-# 三种大小
-
-- order: 1
-
-三种大小的输入框，大的用在表单中，中的为默认。
-
----
-
-````jsx
-import { Datepicker } from 'antd';
-
-ReactDOM.render(
-  <div>
-    <Datepicker size="large" />
-    <Datepicker />
-    <Datepicker size="small" />
-  </div>
-, document.getElementById('components-datepicker-demo-size'));
-````

components/form/demo/mix.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-import { Form, Select, InputNumber, Datepicker, Switch, Slider, Button, message, Row, Col } from 'antd';
+import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button, message, Row, Col } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
 
@@ -92,17 +92,17 @@ const Demo = React.createClass({
         </FormItem>
 
         <FormItem
-          label="Datepicker 日期选择框："
+          label="DatePicker 日期选择框："
           labelCol={{span: 8}}
           required>
           <Col span="6">
-            <Datepicker name="startDate" onChange={this.setValue.bind(this, 'startDate')} value={formData.startDate} />
+            <DatePicker name="startDate" onChange={this.setValue.bind(this, 'startDate')} value={formData.startDate} />
           </Col>
           <Col span="1">
             <p className="ant-form-split">-</p>
           </Col>
           <Col span="6">
-            <Datepicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
+            <DatePicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
           </Col>
         </FormItem>
         <Row>

components/form/demo/validate.md

@@ -13,7 +13,7 @@ validateStatus: ['success', 'warning', 'error', 'validating']。
 ---
 
 ````jsx
-import { Form, Input, Datepicker, Col } from 'antd';
+import { Form, Input, DatePicker, Col } from 'antd';
 const FormItem = Form.Item;
 
 ReactDOM.render(
@@ -78,13 +78,13 @@ ReactDOM.render(
       labelCol={{span: 5}}
       validateStatus="error">
       <Col span="6">
-        <Datepicker />
+        <DatePicker />
       </Col>
       <Col span="1">
         <p className="ant-form-split">-</p>
       </Col>
       <Col span="6">
-        <Datepicker />
+        <DatePicker />
       </Col>
       <Col span="19" offset="5">
         <p className="ant-form-explain">请输入正确选项</p>

components/timepicker/demo/basic.md → components/time-picker/demo/basic.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-import { Timepicker } from 'antd';
+import { TimePicker } from 'antd';
 
 function onChange(time) {
   if (time) {
@@ -16,6 +16,6 @@ function onChange(time) {
 }
 
 ReactDOM.render(
-  <Timepicker onChange={onChange} />
-, document.getElementById('components-timepicker-demo-basic'));
+  <TimePicker onChange={onChange} />
+, document.getElementById('components-time-picker-demo-basic'));
 ````

components/time-picker/demo/disabled.md

@@ -0,0 +1,15 @@
+# 禁用
+
+-	order: 4
+
+禁用时间选择。
+
+---
+
+````jsx
+import { TimePicker } from 'antd';
+
+ReactDOM.render(
+  <TimePicker defaultValue="12:08:23" disabled />
+, document.getElementById('components-time-picker-demo-disabled'));
+````

components/time-picker/demo/size.md

@@ -0,0 +1,19 @@
+# 三种大小
+
+-	order: 6
+
+三种大小的输入框，大的用在表单中，中的为默认。
+
+---
+
+````jsx
+import { TimePicker } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <TimePicker defaultValue="12:08:23" size="large" />
+    <TimePicker defaultValue="12:08:23" />
+    <TimePicker defaultValue="12:08:23" size="small" />
+  </div>
+, document.getElementById('components-time-picker-demo-size'));
+````

components/timepicker/demo/special-minutes.md → components/time-picker/demo/special-minutes.md

@@ -7,9 +7,9 @@
 ---
 
 ````jsx
-import { Timepicker } from 'antd';
+import { TimePicker } from 'antd';
 
 ReactDOM.render(
-  <Timepicker defaultValue="12:30:23" format="HH:mm" minuteOptions={[0, 30]} />
-, document.getElementById('components-timepicker-demo-special-minutes'));
+  <TimePicker defaultValue="12:30:23" format="HH:mm" minuteOptions={[0, 30]} />
+, document.getElementById('components-time-picker-demo-special-minutes'));
 ````

components/timepicker/demo/value.md → components/time-picker/demo/value.md

@@ -7,7 +7,7 @@ value 和 onChange 需要配合使用。
 ---
 
 ````jsx
-import { Timepicker } from 'antd';
+import { TimePicker } from 'antd';
 
 const Test = React.createClass({
   getInitialState() {
@@ -23,9 +23,9 @@ const Test = React.createClass({
     this.setState({ time });
   },
   render() {
-    return <Timepicker value={this.state.value} onChange={this.onChange} />;
+    return <TimePicker value={this.state.value} onChange={this.onChange} />;
   }
 });
 
-ReactDOM.render(<Test />, document.getElementById('components-timepicker-demo-value'));
+ReactDOM.render(<Test />, document.getElementById('components-time-picker-demo-value'));
 ````

components/time-picker/demo/without-seconds.md

@@ -0,0 +1,15 @@
+# 不展示秒
+
+-	order: 2
+
+不展示秒，也不允许选择。
+
+---
+
+````jsx
+import { TimePicker } from 'antd';
+
+ReactDOM.render(
+  <TimePicker defaultValue="12:08:23" format="HH:mm" />
+, document.getElementById('components-time-picker-demo-without-seconds'));
+````

components/timepicker/index.jsx → components/time-picker/index.jsx

@@ -5,7 +5,7 @@ import objectAssign from 'object-assign';
 import defaultLocale from './locale/zh_CN';
 import classNames from 'classnames';
 
-const AntTimepicker = React.createClass({
+const AntTimePicker = React.createClass({
   getDefaultProps() {
     return {
       format: 'HH:mm:ss',
@@ -104,4 +104,4 @@ const AntTimepicker = React.createClass({
 
 });
 
-export default AntTimepicker;
+export default AntTimePicker;

components/timepicker/index.md → components/time-picker/index.md

@@ -1,4 +1,4 @@
-# Timepicker
+# TimePicker
 
 -	category: Components
 -	chinese: 时间选择框
@@ -17,7 +17,7 @@ API
 ---
 
 ```html
-<Timepicker defaultValue="13:30:56" />
+<TimePicker defaultValue="13:30:56" />
 ```
 
 | 参数            | 说明 | 类型 | 默认值 |

components/timepicker/demo/disabled.md

@@ -1,15 +0,0 @@
-# 禁用
-
--	order: 4
-
-禁用时间选择。
-
----
-
-````jsx
-import { Timepicker } from 'antd';
-
-ReactDOM.render(
-  <Timepicker defaultValue="12:08:23" disabled />
-, document.getElementById('components-timepicker-demo-disabled'));
-````

components/timepicker/demo/size.md

@@ -1,19 +0,0 @@
-# 三种大小
-
--	order: 6
-
-三种大小的输入框，大的用在表单中，中的为默认。
-
----
-
-````jsx
-import { Timepicker } from 'antd';
-
-ReactDOM.render(
-  <div>
-    <Timepicker defaultValue="12:08:23" size="large" />
-    <Timepicker defaultValue="12:08:23" />
-    <Timepicker defaultValue="12:08:23" size="small" />
-  </div>
-, document.getElementById('components-timepicker-demo-size'));
-````

components/timepicker/demo/without-seconds.md

@@ -1,15 +0,0 @@
-# 不展示秒
-
--	order: 2
-
-不展示秒，也不允许选择。
-
----
-
-````jsx
-import { Timepicker } from 'antd';
-
-ReactDOM.render(
-  <Timepicker defaultValue="12:08:23" format="HH:mm" />
-, document.getElementById('components-timepicker-demo-without-seconds'));
-````

components/validation/demo/other-items.md

@@ -4,12 +4,12 @@
 
 提供以下组件表单域的校验。
 
-`Select` `Radio` `Datepicker` `InputNumber`。
+`Select` `Radio` `DatePicker` `InputNumber`。
 
 ---
 
 ````jsx
-import {Validation, Select, Radio, Button, Datepicker, InputNumber, Form} from 'antd';
+import {Validation, Select, Radio, Button, DatePicker, InputNumber, Form} from 'antd';
 const Validator = Validation.Validator;
 const Option = Select.Option;
 const RadioGroup = Radio.Group;
@@ -172,7 +172,7 @@ const Demo = React.createClass({
                 type: 'date',
                 message: '你的生日是什么呢?'
               }, {validator: this.checkBirthday}]}>
-                <Datepicker name="birthday" value={formData.birthday} />
+                <DatePicker name="birthday" value={formData.birthday} />
               </Validator>
           </FormItem>
 

docs/getting-started.md

@@ -47,7 +47,7 @@ $ npm install
 
 ```jsx
 import React from 'react';
-import { Datepicker, message } from 'antd';
+import { DatePicker, message } from 'antd';
 
 const App = React.createClass({
   getInitialState() {
@@ -63,7 +63,7 @@ const App = React.createClass({
   },
   render() {
     return <div style={{width: 400, margin: '100px auto'}}>
-      <Datepicker onSelect={this.handleChange} />
+      <DatePicker onSelect={this.handleChange} />
       <div style={{marginTop: 20}}>当前日期：{this.state.date.toString()}</div>
     </div>;
   }

docs/introduce.md

@@ -35,15 +35,15 @@
 ## 示例
 
 ```jsx
-import { Datepicker } from 'antd';
-ReactDOM.render(<Datepicker />, mountNode);
+import { DatePicker } from 'antd';
+ReactDOM.render(<DatePicker />, mountNode);
 ```
 
 或者按需加载：
 
 ```jsx
-import Datepicker from 'antd/lib/datepicker';
-ReactDOM.render(<Datepicker />, mountNode);
+import DatePicker from 'antd/lib/date-picker';
+ReactDOM.render(<DatePicker />, mountNode);
 ```
 
 引入样式：

index.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const antd = {
   Affix: require('./components/affix'),
-  Datepicker: require('./components/datepicker'),
+  DatePicker: require('./components/date-picker'),
   Tooltip: require('./components/tooltip'),
   Carousel: require('./components/carousel'),
   Tabs: require('./components/tabs'),
@@ -41,7 +41,7 @@ const antd = {
   Form: require('./components/form'),
   Input: require('./components/input'),
   Calendar: require('./components/calendar'),
-  Timepicker: require('./components/timepicker'),
+  TimePicker: require('./components/time-picker'),
 };
 
 antd.version = require('./package.json').version;

scripts/demo.js

@@ -1,5 +1,7 @@
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
+function camelize(str) {
+  return str.replace (/(?:^|[-_])(\w)/g, function (_, c) {
+    return c ? c.toUpperCase () : '';
+  });
 }
 
 window.require = function (path) {
@@ -7,7 +9,7 @@ window.require = function (path) {
   var namespaces = path.split('/');
   namespaces.forEach(function (key, i) {
     if (i === 2) {
-      key = capitalizeFirstLetter(key);
+      key = camelize(key);
     }
     if (key !== 'lib') {
       if (result[key]) {
@@ -34,9 +36,9 @@ window['object-assign'] = require('object-assign');
 window['classnames'] = require('classnames');
 require('./importCss');
 
-antd.Datepicker.locale = {
-  en_US: require('../components/datepicker/locale/en_US'),
-  zh_CN: require('../components/datepicker/locale/zh_CN'),
+antd.DatePicker.locale = {
+  en_US: require('../components/date-picker/locale/en_US'),
+  zh_CN: require('../components/date-picker/locale/zh_CN'),
 };
 
 antd.Calendar.locale = {