add timepicker doc

components/locale-provider/default.js

@@ -1,13 +1,13 @@
-// import Pagination from 'rc-pagination/lib/locale/en_US'
+import Pagination from '../vc-pagination/locale/en_US'
 // import DatePicker from '../date-picker/locale/en_US'
-// import TimePicker from '../time-picker/locale/en_US'
+import TimePicker from '../time-picker/locale/en_US'
 // import Calendar from '../calendar/locale/en_US'
 
 export default {
   locale: 'en',
-  // Pagination,
+  Pagination,
   // DatePicker,
-  // TimePicker,
+  TimePicker,
   // Calendar,
   Table: {
     filterTitle: 'Filter menu',

components/locale-provider/zh_CN.js

@@ -1,13 +1,13 @@
-// import Pagination from 'rc-pagination/lib/locale/zh_CN'
+import Pagination from '../vc-pagination/locale/zh_CN'
 // import DatePicker from '../date-picker/locale/zh_CN'
-// import TimePicker from '../time-picker/locale/zh_CN'
+import TimePicker from '../time-picker/locale/zh_CN'
 // import Calendar from '../calendar/locale/zh_CN'
 
 export default {
   locale: 'zh-cn',
-  // Pagination,
+  Pagination,
   // DatePicker,
-  // TimePicker,
+  TimePicker,
   // Calendar,
   Table: {
     filterTitle: '筛选',

components/time-picker/demo/index.vue

@@ -0,0 +1,52 @@
+<script>
+import Hours from './12hours'
+import Addon from './addon'
+import Basic from './basic'
+import Disabled from './disabled'
+import HideColumn from './hide-column'
+import IntervalOptions from './interval-options'
+import Size from './size'
+import Value from './value'
+
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+const md = {
+  cn: `# TimePicker 时间选择框
+          输入或选择时间的控件。
+## 何时使用
+当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
+          ## 代码演示`,
+  us: `# TimePicker
+          To select/input a time.
+## When To Use
+By clicking the input box, you can select a time from a popup panel.`,
+}
+export default {
+  category: 'Components',
+  subtitle: '时间选择框',
+  type: 'Data Entry',
+  title: 'TimePicker',
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <Hours/>
+        <Addon/>
+        <Basic/>
+        <Disabled/>
+        <HideColumn/>
+        <IntervalOptions/>
+        <Size/>
+        <Value/>
+        <api>
+          <CN slot='cn' />
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
+<style>
+.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }
+</style>

components/time-picker/index.en-US.md

@@ -1,32 +1,10 @@
----
-category: Components
-type: Data Entry
-title: TimePicker
----
-
-To select/input a time.
-
-## When To Use
-
-* * *
-
-By clicking the input box, you can select a time from a popup panel.
-
 ## API
 
-* * *
-
-```jsx
-import moment from 'moment';
-<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />
-```
-
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| addon | called from timepicker panel to render some addon to its bottom | function | - |
+| addon | some addon to timepicker panel bottom | slot | - |
 | allowEmpty | allow clearing text | boolean | true |
 | autoFocus | get focus when component mounted | boolean | false |
-| className | className of picker | string | '' |
 | clearText | clear tooltip of icon | string | clear |
 | defaultOpenValue | default open panel value, used to set utcOffset,locale if value/defaultValue absent | [moment](http://momentjs.com/) | moment() |
 | defaultValue | to set default time | [moment](http://momentjs.com/) | - |
@@ -39,14 +17,18 @@ import moment from 'moment';
 | hideDisabledOptions | hide the options that can not be selected | boolean | false |
 | hourStep | interval between hours in picker | number | 1 |
 | minuteStep | interval between minutes in picker | number | 1 |
-| open | whether to popup panel | boolean | false |
+| open(.sync) | whether to popup panel | boolean | false |
 | placeholder | display when there's no value | string | "Select a time" |
 | popupClassName | className of panel | string | '' |
 | secondStep | interval between seconds in picker | number | 1 |
 | use12Hours | display as 12 hours format, with default format `h:mm:ss a` | boolean | false |
-| value | to set time | [moment](http://momentjs.com/) | - |
+| value(v-model) | to set time | [moment](http://momentjs.com/) | - |
-| onChange | a callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - |
+
-| onOpenChange | a callback function which will be called while panel opening/closing | (open: boolean): void | - |
+### events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| change | a callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void |
+| openChange | a callback function which will be called while panel opening/closing | (open: boolean): void |
 
 ## Methods
 
@@ -55,4 +37,3 @@ import moment from 'moment';
 | blur() | remove focus |
 | focus() | get focus |
 
-<style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>

components/time-picker/index.zh-CN.md

@@ -1,33 +1,11 @@
----
-category: Components
-subtitle: 时间选择框
-type: Data Entry
-title: TimePicker
----
-
-输入或选择时间的控件。
-
-## 何时使用
-
-* * *
-
-当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
 
 ## API
 
-* * *
-
-```jsx
-import moment from 'moment';
-<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />
-```
-
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| addon | 选择框底部显示自定义的内容 | function | 无 |
+| addon | 选择框底部显示自定义的内容 | slot | 无 |
 | allowEmpty | 是否展示清除按钮 | boolean | true |
 | autoFocus | 自动获取焦点 | boolean | false |
-| className | 选择器类名 | string | '' |
 | clearText | 清除按钮的提示文案 | string | clear |
 | defaultOpenValue | 当 defaultValue/value 不存在时，可以设置面板打开时默认选中的值 | [moment](http://momentjs.com/) | moment() |
 | defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 |
@@ -40,14 +18,18 @@ import moment from 'moment';
 | hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
 | hourStep | 小时选项间隔 | number | 1 |
 | minuteStep | 分钟选项间隔 | number | 1 |
-| open | 面板是否打开 | boolean | false |
+| open(.sync) | 面板是否打开 | boolean | false |
 | placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
 | popupClassName | 弹出层类名 | string | '' |
 | secondStep | 秒选项间隔 | number | 1 |
 | use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |
-| value | 当前时间 | [moment](http://momentjs.com/) | 无 |
+| value(v-model) | 当前时间 | [moment](http://momentjs.com/) | 无 |
-| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 |
+
-| onOpenChange | 面板打开/关闭时的回调 | (open: boolean): void | 无 |
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 时间发生变化的回调 | function(time: moment, timeString: string): void |
+| openChange | 面板打开/关闭时的回调 | (open: boolean): void |
 
 ## 方法
 
@@ -55,5 +37,3 @@ import moment from 'moment';
 | --- | --- |
 | blur() | 移除焦点 |
 | focus() | 获取焦点 |
-
-<style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>

examples/demo.js

@@ -30,3 +30,4 @@ export { default as cascader } from 'antd/cascader/demo/index.vue'
 export { default as backTop } from 'antd/back-top/demo/index.vue'
 export { default as modal } from 'antd/modal/demo/index.vue'
 export { default as alert } from 'antd/alert/demo/index.vue'
+export { default as timePicker } from 'antd/time-picker/demo/index.vue'