diff --git a/components/time-picker/__tests__/__snapshots__/demo.test.js.snap b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
index 51f4779c9f..97b6a0de74 100644
--- a/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -1,5 +1,52 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`renders ./components/time-picker/demo/12hours.md correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
exports[`renders ./components/time-picker/demo/addon.md correctly 1`] = `
+
+
+
+
+, mountNode);
+````
diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md
index e59767b45a..f437ef933c 100644
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@@ -27,13 +27,14 @@ import moment from 'moment';
| value | to set time | [moment](http://momentjs.com/) | - |
| placeholder | display when there's no value | string | "Select a time" |
| onChange | a callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - |
-| format | to set the time format | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
+| format | to set the time format | string | "HH:mm:ss" |
| disabled | determine whether the TimePicker is disabled | boolean | false |
| disabledHours | to specify the hours that cannot be selected | function() | - |
| disabledMinutes | to specify the minutes that cannot be selected | function(selectedHour) | - |
| disabledSeconds | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - |
| hideDisabledOptions | hide the options that can not be selected | boolean | false |
| getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - |
-| addon | called from timepicker panel to render some addon to its bottom | function | 无 |
+| addon | called from timepicker panel to render some addon to its bottom | function | - |
+| use12Hours | display as 12 hours format, with default format `h:mm:ss a` | boolean | false |
diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx
index dd0a029b44..dd74a02e29 100644
--- a/components/time-picker/index.tsx
+++ b/components/time-picker/index.tsx
@@ -22,6 +22,7 @@ export interface TimePickerProps {
style?: React.CSSProperties;
getPopupContainer?: (trigger: any) => any;
addon?: Function;
+ use12Hours?: boolean;
}
abstract class TimePicker extends React.Component {
@@ -81,10 +82,21 @@ abstract class TimePicker extends React.Component {
this.timePickerRef.focus();
}
+ getDefaultFormat() {
+ const { format, use12Hours } = this.props;
+ if (format) {
+ return format;
+ } else if (use12Hours) {
+ return 'h:mm:ss a';
+ }
+ return 'HH:mm:ss';
+ }
+
render() {
- const props = assign({ format: 'HH:mm:ss' }, this.props);
+ const props = assign({}, this.props);
delete props.defaultValue;
+ const format = this.getDefaultFormat();
const className = classNames(props.className, {
[`${props.prefixCls}-${props.size}`]: !!props.size,
});
@@ -101,12 +113,13 @@ abstract class TimePicker extends React.Component {
-1}
- showMinute={props.format.indexOf('mm') > -1}
- showSecond={props.format.indexOf('ss') > -1}
+ showHour={format.indexOf('HH') > -1 || format.indexOf('h') > -1}
+ showMinute={format.indexOf('mm') > -1}
+ showSecond={format.indexOf('ss') > -1}
onChange={this.handleChange}
addon={addon}
/>
diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md
index e8aaeb3c1d..594709a92b 100644
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@@ -28,7 +28,7 @@ import moment from 'moment';
| value | 当前时间 | [moment](http://momentjs.com/) | 无 |
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 |
-| format | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
+| format | 展示的时间格式 | string | "HH:mm:ss" |
| disabled | 禁用全部操作 | boolean | false |
| disabledHours | 禁止选择部分小时选项 | function() | 无 |
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | 无 |
@@ -36,5 +36,6 @@ import moment from 'moment';
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
| getPopupContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | 无 |
| addon | 选择框底部显示自定义的内容 | function | 无 |
+| use12Hours | 使用 12 小时制,为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |
diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less
index a91a2b70b3..f937bc5bcf 100644
--- a/components/time-picker/style/index.less
+++ b/components/time-picker/style/index.less
@@ -5,7 +5,6 @@
@timepicker-prefix-cls: ~"@{ant-prefix}-time-picker";
.@{timepicker-prefix-cls}-panel {
- max-width: @time-picker-panel-width;
z-index: @zindex-picker;
position: absolute;
diff --git a/package.json b/package.json
index 476f73fabc..f746a7e73d 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
"rc-switch": "~1.4.2",
"rc-table": "~5.2.13",
"rc-tabs": "~7.3.0",
- "rc-time-picker": "~2.2.1",
+ "rc-time-picker": "~2.3.3",
"rc-tooltip": "~3.4.2",
"rc-tree": "~1.4.0",
"rc-tree-select": "~1.9.0",