diff --git a/components/time-picker/__tests__/__snapshots__/demo.test.js.snap b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
index 5e3e5c6c18..bc1779d3b4 100644
--- a/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -411,6 +411,41 @@ exports[`renders ./components/time-picker/demo/size.md correctly 1`] = `
`;
+exports[`renders ./components/time-picker/demo/suffix.md correctly 1`] = `
+
+
+
+
+
+
+
+
+`;
+
exports[`renders ./components/time-picker/demo/value.md correctly 1`] = `
;
+
+ReactDOM.render(
+ ,
+ mountNode
+);
+````
diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md
index 64aff2f541..72c24516cc 100644
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@@ -44,6 +44,7 @@ import moment from 'moment';
| placeholder | display when there's no value | string | "Select a time" |
| popupClassName | className of panel | string | '' |
| secondStep | interval between seconds in picker | number | 1 |
+| suffix | The custom suffix icon | ReactNode | - |
| 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 | - |
diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx
index febf716114..1e9de36f34 100644
--- a/components/time-picker/index.tsx
+++ b/components/time-picker/index.tsx
@@ -50,6 +50,7 @@ export interface TimePickerProps {
clearText?: string;
defaultOpenValue?: moment.Moment;
popupClassName?: string;
+ suffix?: React.ReactNode;
}
export interface TimePickerLocale {
@@ -153,20 +154,35 @@ class TimePicker extends React.Component {
) : null
);
- const inputIcon = (
-
+ const { suffix, prefixCls } = props;
+ const clockIcon = suffix && (
+ React.isValidElement<{ className?: string }>(suffix)
+ ? React.cloneElement(
+ suffix,
+ {
+ className: classNames({
+ [suffix.props.className!]: suffix.props.className,
+ [`${prefixCls}-clock-icon`]: true,
+ }),
+ },
+ ) : {suffix}) || (
+ );
+
+ const inputIcon = (
+
+ {clockIcon}
);
const clearIcon = (
);
diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md
index 086a685cbd..1eac9ac6cf 100644
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@@ -45,6 +45,7 @@ import moment from 'moment';
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
| popupClassName | 弹出层类名 | string | '' |
| secondStep | 秒选项间隔 | number | 1 |
+| suffix | 自定义的选择框后缀图标 | ReactNode | - |
| use12Hours | 使用 12 小时制,为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |
| value | 当前时间 | [moment](http://momentjs.com/) | 无 |
| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 |