Browse Source

timepicker component featuer fix

pull/540/head
MG12 9 years ago
parent
commit
55c2d2d244
  1. 16
      components/timepicker/demo/no-default-value.md
  2. 27
      components/timepicker/index.jsx
  3. 13
      components/timepicker/index.md
  4. 2
      package.json
  5. 4
      style/components/timepicker/Picker.less

16
components/timepicker/demo/no-default-value.md

@ -0,0 +1,16 @@
无默认值
====
- order: 5
没有默认时间。
---
````jsx
import { Timepicker } from 'antd';
ReactDOM.render(
<Timepicker placeholder="Select sth." />
, document.getElementById('components-timepicker-demo-no-default-value'));
````

27
components/timepicker/index.jsx

@ -1,9 +1,6 @@
import React from 'react';
import DateTimeFormat from 'gregorian-calendar-format';
import TimePicker from 'rc-time-picker/lib/TimePicker';
import TimePanel from 'rc-time-picker/lib/TimePanel';
// import defaultLocale from './locale';
import TimePickerLocale from 'rc-time-picker/lib/locale/zh_CN';
@ -40,30 +37,8 @@ const AntTimepicker = React.createClass({
});
}
const timePanel = (
<TimePanel
prefixCls={prefixCls}
defaultValue={showValue}
locale={TimePickerLocale}
formatter={formatter}
hourOptions={hourOptions}
minuteOptions={minuteOptions}
secondOptions={secondOptions}
/>
);
return (
<TimePicker prefixCls={prefixCls} panel={timePanel} align={align} disabled={disabled} value={showValue}>
{
({value}) => {
return (
<span>
<input className={`${prefixCls}-picker-input ant-input`} type="text" placeholder={placeholder} readOnly disabled={disabled} value={value && formatter.format(value)} />
<span className={`${prefixCls}-picker-icon`} />
</span>
);
}
}
</TimePicker>
<TimePicker prefixCls={prefixCls} locale={TimePickerLocale} formatter={formatter} hourOptions={hourOptions} minuteOptions={minuteOptions} secondOptions={secondOptions} disabled={disabled} align={align} placeholder={placeholder} value={showValue} />
);
}

13
components/timepicker/index.md

@ -21,12 +21,13 @@ API
<Timepicker value="13:30:56" />
```
| 参数 | 说明 | 类型 | 默认值 |
|---------------|---------------------------------------------------------------|----------|-----------------------------------------------------------------|
| defaultValue | 默认时间 | string | 无 |
| format | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
| disabled | 禁用 | bool | false |
| hourOptions | 特定可选择的小时 | array | 0 到 24 组成的数组 |
| 参数 | 说明 | 类型 | 默认值 |
|-----------------|-----|-----|-------|
| defaultValue | 默认时间 | string | 无 |
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
| format | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
| disabled | 禁用 | bool | false |
| hourOptions | 特定可选择的小时 | array | 0 到 24 组成的数组 |
| minuteOptions | 特定可选择的分钟 | array | 0 到 60 组成的数组 |
| secondOptions | 特定可选择的秒 | array | 0 到 60 组成的数组 |

2
package.json

@ -57,7 +57,7 @@
"rc-switch": "~1.3.1",
"rc-table": "~3.6.1",
"rc-tabs": "~5.5.0",
"rc-time-picker": "^0.2.0",
"rc-time-picker": "~0.5.2",
"rc-tooltip": "~3.2.0",
"rc-tree": "~0.19.0",
"rc-trigger": "~1.0.6",

4
style/components/timepicker/Picker.less

@ -5,8 +5,8 @@
font-size: @font-size-base;
transition: opacity 0.3s ease;
&-input {
outline: none;
> input {
.ant-input;
width: 100px;
}

Loading…
Cancel
Save