diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx
index d14944c7f3..15542ecb16 100644
--- a/components/date-picker/RangePicker.tsx
+++ b/components/date-picker/RangePicker.tsx
@@ -7,8 +7,7 @@ import classNames from 'classnames';
 import Icon from '../icon';
 import warning from '../_util/warning';
 import callMoment from '../_util/callMoment';
-
-export type RangePickerValue = moment.Moment[];
+import { RangePickerValue } from './interface';
 
 export interface RangePickerState {
   value?: RangePickerValue;
@@ -17,21 +16,21 @@ export interface RangePickerState {
   hoverValue?: RangePickerValue;
 }
 
-function getShowDateFromValue(value: moment.Moment[]): moment.Moment[] | undefined {
+function getShowDateFromValue(value: RangePickerValue) {
   const [start, end] = value;
   // value could be an empty array, then we should not reset showDate
   if (!start && !end) {
     return;
   }
   const newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end;
-  return [start, newEnd];
+  return [start, newEnd] as RangePickerValue;
 }
 
 function formatValue(value: moment.Moment | undefined, format: string): string {
   return (value && value.format(format)) || '';
 }
 
-function pickerValueAdapter(value?: moment.Moment | moment.Moment[]): moment.Moment[] | undefined {
+function pickerValueAdapter(value?: moment.Moment | RangePickerValue): RangePickerValue | undefined {
   if (!value) {
     return;
   }
@@ -103,7 +102,7 @@ export default class RangePicker extends React.Component<any, RangePickerState>
 
   clearHoverValue = () => this.setState({ hoverValue: [] });
 
-  handleChange = (value: moment.Moment[]) => {
+  handleChange = (value: RangePickerValue) => {
     const props = this.props;
     if (!('value' in props)) {
       this.setState(({ showDate }) => ({
@@ -132,7 +131,7 @@ export default class RangePicker extends React.Component<any, RangePickerState>
 
   handleHoverChange = (hoverValue: any) => this.setState({ hoverValue });
 
-  setValue(value: moment.Moment[], hidePanel?: boolean) {
+  setValue(value: RangePickerValue, hidePanel?: boolean) {
     this.handleChange(value);
     if ((hidePanel || !this.props.showTime) && !('open' in this.props)) {
       this.setState({ open: false });
@@ -194,10 +193,10 @@ export default class RangePicker extends React.Component<any, RangePickerState>
     } = props;
     if (value && localeCode) {
       if (value[0]) {
-        value[0].locale(localeCode);
+        value[0]!.locale(localeCode);
       }
       if (value[1]) {
-        value[1].locale(localeCode);
+        value[1]!.locale(localeCode);
       }
     }
 
diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx
index cebcdd5ec3..020b367358 100755
--- a/components/date-picker/index.tsx
+++ b/components/date-picker/index.tsx
@@ -1,98 +1,20 @@
 import * as React from 'react';
-import * as moment from 'moment';
 import RcCalendar from 'rc-calendar';
 import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import createPicker from './createPicker';
 import wrapPicker from './wrapPicker';
 import RangePicker from './RangePicker';
 import WeekPicker from './WeekPicker';
-import { TimePickerProps } from '../time-picker';
+import { DatePickerProps, DatePickerDecorator } from './interface';
 
-export interface PickerProps {
-  prefixCls?: string;
-  inputPrefixCls?: string;
-  format?: string;
-  disabled?: boolean;
-  allowClear?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  popupStyle?: React.CSSProperties;
-  locale?: any;
-  size?: 'large' | 'small' | 'default';
-  getCalendarContainer?: (triggerNode: Element) => HTMLElement;
-  open?: boolean;
-  onOpenChange?: (status: boolean) => void;
-  disabledDate?: (current: moment.Moment) => boolean;
-  renderExtraFooter?: () => React.ReactNode;
-  dateRender?: (current: moment.Moment, today: moment.Moment) => React.ReactNode;
-}
-
-export interface SinglePickerProps {
-  value?: moment.Moment;
-  defaultValue?: moment.Moment;
-  defaultPickerValue?: moment.Moment;
-  onChange?: (date: moment.Moment, dateString: string) => void;
-}
-
-export interface DatePickerProps extends PickerProps, SinglePickerProps {
-  className?: string;
-  showTime?: TimePickerProps | boolean;
-  showToday?: boolean;
-  open?: boolean;
-  disabledTime?: (current: moment.Moment) => {
-    disabledHours?: () => number[],
-    disabledMinutes?: () => number[],
-    disabledSeconds?: () => number[],
-  };
-  onOpenChange?: (status: boolean) => void;
-  onOk?: (selectedTime: moment.Moment) => void;
-  placeholder?: string;
-}
 const DatePicker = wrapPicker(createPicker(RcCalendar)) as React.ClassicComponentClass<DatePickerProps>;
 
-export interface MonthPickerProps extends PickerProps, SinglePickerProps {
-  className?: string;
-  placeholder?: string;
-}
 const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'YYYY-MM');
 
-export interface RangePickerProps extends PickerProps {
-  className?: string;
-  value?: [moment.Moment, moment.Moment];
-  defaultValue?: [moment.Moment, moment.Moment];
-  defaultPickerValue?: [moment.Moment, moment.Moment];
-  onChange?: (dates: [moment.Moment, moment.Moment], dateStrings: [string, string]) => void;
-  onCalendarChange?: (dates: [moment.Moment, moment.Moment], dateStrings: [string, string]) => void;
-  onOk?: (selectedTime: moment.Moment) => void;
-  showTime?: TimePickerProps | boolean;
-  ranges?: {
-    [range: string]: moment.Moment[],
-  };
-  placeholder?: [string, string];
-  mode?: string | string[];
-  disabledTime?: (current: moment.Moment, type: string) => {
-    disabledHours?: () => number[],
-    disabledMinutes?: () => number[],
-    disabledSeconds?: () => number[],
-  };
-  onPanelChange?: (value?: moment.Moment[], mode?: string | string[]) => void;
-}
-
-export interface WeexPickerProps extends PickerProps, SinglePickerProps {
-  className?: string;
-  placeholder?: string;
-}
-
 Object.assign(DatePicker, {
   RangePicker: wrapPicker(RangePicker),
   MonthPicker,
   WeekPicker: wrapPicker(WeekPicker, 'YYYY-Wo'),
 });
 
-export interface DatePickerDecorator extends React.ClassicComponentClass<DatePickerProps> {
-  RangePicker: React.ClassicComponentClass<RangePickerProps>;
-  MonthPicker: React.ClassicComponentClass<MonthPickerProps>;
-  WeekPicker: React.ClassicComponentClass<WeexPickerProps>;
-}
-
 export default DatePicker as DatePickerDecorator;
diff --git a/components/date-picker/interface.tsx b/components/date-picker/interface.tsx
new file mode 100644
index 0000000000..90d09285ad
--- /dev/null
+++ b/components/date-picker/interface.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+import * as moment from 'moment';
+import { TimePickerProps } from '../time-picker';
+
+export interface PickerProps {
+  prefixCls?: string;
+  inputPrefixCls?: string;
+  format?: string;
+  disabled?: boolean;
+  allowClear?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  popupStyle?: React.CSSProperties;
+  locale?: any;
+  size?: 'large' | 'small' | 'default';
+  getCalendarContainer?: (triggerNode: Element) => HTMLElement;
+  open?: boolean;
+  onOpenChange?: (status: boolean) => void;
+  disabledDate?: (current: moment.Moment) => boolean;
+  renderExtraFooter?: () => React.ReactNode;
+  dateRender?: (current: moment.Moment, today: moment.Moment) => React.ReactNode;
+}
+
+export interface SinglePickerProps {
+  value?: moment.Moment;
+  defaultValue?: moment.Moment;
+  defaultPickerValue?: moment.Moment;
+  onChange?: (date: moment.Moment, dateString: string) => void;
+}
+
+export interface DatePickerProps extends PickerProps, SinglePickerProps {
+  className?: string;
+  showTime?: TimePickerProps | boolean;
+  showToday?: boolean;
+  open?: boolean;
+  disabledTime?: (current: moment.Moment) => {
+    disabledHours?: () => number[],
+    disabledMinutes?: () => number[],
+    disabledSeconds?: () => number[],
+  };
+  onOpenChange?: (status: boolean) => void;
+  onOk?: (selectedTime: moment.Moment) => void;
+  placeholder?: string;
+}
+
+export interface MonthPickerProps extends PickerProps, SinglePickerProps {
+  className?: string;
+  placeholder?: string;
+}
+
+export type RangePickerValue =
+  undefined[] |
+  [moment.Moment] |
+  [undefined, moment.Moment] |
+  [moment.Moment, moment.Moment];
+export type RangePickerRange = RangePickerValue | (() => RangePickerValue);
+
+export interface RangePickerProps extends PickerProps {
+  className?: string;
+  value?: RangePickerValue;
+  defaultValue?: RangePickerValue;
+  defaultPickerValue?: RangePickerValue;
+  onChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
+  onCalendarChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
+  onOk?: (selectedTime: moment.Moment) => void;
+  showTime?: TimePickerProps | boolean;
+  ranges?: {
+    [range: string]: RangePickerRange,
+  };
+  placeholder?: [string, string];
+  mode?: string | string[];
+  disabledTime?: (current: moment.Moment, type: string) => {
+    disabledHours?: () => number[],
+    disabledMinutes?: () => number[],
+    disabledSeconds?: () => number[],
+  };
+  onPanelChange?: (value?: RangePickerValue, mode?: string | string[]) => void;
+}
+
+export interface WeexPickerProps extends PickerProps, SinglePickerProps {
+  className?: string;
+  placeholder?: string;
+}
+
+export interface DatePickerDecorator extends React.ClassicComponentClass<DatePickerProps> {
+  RangePicker: React.ClassicComponentClass<RangePickerProps>;
+  MonthPicker: React.ClassicComponentClass<MonthPickerProps>;
+  WeekPicker: React.ClassicComponentClass<WeexPickerProps>;
+}