mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-01 19:48:38 +08:00
add timepicker doc
This commit is contained in:
tangjinzhou
parent
bf6cbd56eb
commit
62136faa44
@ -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',
|
||||
|
||||
@ -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: '筛选',
|
||||
|
||||
52
components/time-picker/demo/index.vue
Normal file
52
components/time-picker/demo/index.vue
Normal file
@ -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>
|
||||
@ -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/) | - |
|
||||
| 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 | - |
|
||||
| value(v-model) | to set time | [moment](http://momentjs.com/) | - |
|
||||
|
||||
### 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>
|
||||
|
||||
@ -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/) | 无 |
|
||||
| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 |
|
||||
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean): void | 无 |
|
||||
| value(v-model) | 当前时间 | [moment](http://momentjs.com/) | 无 |
|
||||
|
||||
### 事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| 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>
|
||||
|
||||
@ -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'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user