diff --git a/components/date-picker/InputIcon.tsx b/components/date-picker/InputIcon.tsx
new file mode 100644
index 0000000000..278da7da12
--- /dev/null
+++ b/components/date-picker/InputIcon.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Icon from '../icon';
+import classNames from 'classnames';
+
+export default function InputIcon(props: { suffixIcon: any; prefixCls: string }) {
+  const { suffixIcon, prefixCls } = props;
+  return (
+    (suffixIcon &&
+      (React.isValidElement<{ className?: string }>(suffixIcon) ? (
+        React.cloneElement(suffixIcon, {
+          className: classNames({
+            [suffixIcon.props.className!]: suffixIcon.props.className,
+            [`${prefixCls}-picker-icon`]: true,
+          }),
+        })
+      ) : (
+        <span className={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
+      ))) || <Icon type="calendar" className={`${prefixCls}-picker-icon`} />
+  );
+}
diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx
index b717a66748..a15dc81e4e 100644
--- a/components/date-picker/RangePicker.tsx
+++ b/components/date-picker/RangePicker.tsx
@@ -13,6 +13,7 @@ import warning from '../_util/warning';
 import interopDefault from '../_util/interopDefault';
 import { RangePickerValue, RangePickerPresetRange } from './interface';
 import { formatDate } from './utils';
+import InputIcon from './InputIcon';
 
 export interface RangePickerState {
   value?: RangePickerValue;
@@ -368,17 +369,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
         />
       ) : null;
 
-    const inputIcon = (suffixIcon &&
-      (React.isValidElement<{ className?: string }>(suffixIcon) ? (
-        React.cloneElement(suffixIcon, {
-          className: classNames({
-            [suffixIcon.props.className!]: suffixIcon.props.className,
-            [`${prefixCls}-picker-icon`]: true,
-          }),
-        })
-      ) : (
-        <span className={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
-      ))) || <Icon type="calendar" className={`${prefixCls}-picker-icon`} />;
+    const inputIcon = <InputIcon suffixIcon={suffixIcon} prefixCls={prefixCls} />;
 
     const input = ({ value: inputValue }: { value: any }) => {
       const [start, end] = inputValue;
diff --git a/components/date-picker/WeekPicker.tsx b/components/date-picker/WeekPicker.tsx
index 13469b10c8..bba9ca548f 100644
--- a/components/date-picker/WeekPicker.tsx
+++ b/components/date-picker/WeekPicker.tsx
@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import Icon from '../icon';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import interopDefault from '../_util/interopDefault';
+import InputIcon from './InputIcon';
 
 function formatValue(value: moment.Moment | null, format: string): string {
   return (value && value.format(format)) || '';
@@ -180,17 +181,7 @@ class WeekPicker extends React.Component<any, WeekPickerState> {
         />
       ) : null;
 
-    const inputIcon = (suffixIcon &&
-      (React.isValidElement<{ className?: string }>(suffixIcon) ? (
-        React.cloneElement(suffixIcon, {
-          className: classNames({
-            [suffixIcon.props.className!]: suffixIcon.props.className,
-            [`${prefixCls}-picker-icon`]: true,
-          }),
-        })
-      ) : (
-        <span className={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
-      ))) || <Icon type="calendar" className={`${prefixCls}-picker-icon`} />;
+    const inputIcon = <InputIcon suffixIcon={suffixIcon} prefixCls={prefixCls} />;
 
     const input = ({ value }: { value: moment.Moment | undefined }) => (
       <span style={{ display: 'inline-block', width: '100%' }}>