diff --git a/components/date-picker/RangePicker.vue b/components/date-picker/RangePicker.vue
index e6cdd5ea1..89f875971 100644
--- a/components/date-picker/RangePicker.vue
+++ b/components/date-picker/RangePicker.vue
@@ -182,13 +182,14 @@ export default {
     },
 
     renderFooter (...args) {
-      const { prefixCls, ranges, renderExtraFooter } = this
+      const { prefixCls, ranges, $scopedSlots, $slots } = this
+      const renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter
       if (!ranges && !renderExtraFooter) {
         return null
       }
       const customFooter = renderExtraFooter ? (
         <div class={`${prefixCls}-footer-extra`} key='extra'>
-          {renderExtraFooter(...args)}
+          {typeof renderExtraFooter === 'function' ? renderExtraFooter(...args) : renderExtraFooter}
         </div>
       ) : null
       const operations = Object.keys(ranges || {}).map((range) => {
diff --git a/components/date-picker/createPicker.js b/components/date-picker/createPicker.js
index 59231a758..c95b9024a 100644
--- a/components/date-picker/createPicker.js
+++ b/components/date-picker/createPicker.js
@@ -51,10 +51,11 @@ export default function createPicker (TheCalendar, props) {
     },
     methods: {
       renderFooter (...args) {
-        const { prefixCls, renderExtraFooter } = this
+        const { prefixCls, $scopedSlots, $slots } = this
+        const renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter
         return renderExtraFooter ? (
           <div class={`${prefixCls}-footer-extra`}>
-            {renderExtraFooter(...args)}
+            {typeof renderExtraFooter === 'function' ? renderExtraFooter(...args) : renderExtraFooter}
           </div>
         ) : null
       },
diff --git a/components/date-picker/demo/disabled.md b/components/date-picker/demo/disabled.md
index 7fbe5347c..db63bf675 100644
--- a/components/date-picker/demo/disabled.md
+++ b/components/date-picker/demo/disabled.md
@@ -1,34 +1,37 @@
----
-order: 4
-title:
-  zh-CN: 禁用
-  en-US: Disabled
----
-
-## zh-CN
 
+<cn>
+#### 禁用
 选择框的不可用状态。
+</cn>
 
-## en-US
-
+<us>
+#### Disabled
 A disabled state of the `DatePicker`.
+</us>
 
-````jsx
-import { DatePicker } from 'antd';
-import moment from 'moment';
-const { MonthPicker, RangePicker } = DatePicker;
-
-const dateFormat = 'YYYY-MM-DD';
-ReactDOM.render(
+```html
+<template>
   <div>
-    <DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
+    <a-date-picker :defaultValue="moment('2015-06-06', dateFormat)" disabled />
     <br />
-    <MonthPicker defaultValue={moment('2015-06', 'YYYY-MM')} disabled />
+    <a-month-picker :defaultValue="moment('2015-06', 'YYYY-MM')" disabled />
     <br />
-    <RangePicker
-      defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]}
+    <a-range-picker
+      :defaultValue="[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]"
       disabled
     />
   </div>
-, mountNode);
-````
+</template>
+<script>
+import moment from 'moment';
+export default {
+  data(){
+    this.dateFormat = 'YYYY-MM-DD'
+    return {}
+  },
+  methods: {
+    moment,
+  }
+}
+</script>
+```
diff --git a/components/date-picker/demo/extra-footer.md b/components/date-picker/demo/extra-footer.md
index a313edd6a..337ac5fc0 100644
--- a/components/date-picker/demo/extra-footer.md
+++ b/components/date-picker/demo/extra-footer.md
@@ -1,29 +1,42 @@
----
-order: 10
-title:
-  zh-CN: 额外的页脚
-  en-US: Extra Footer
----
-
-## zh-CN
 
+<cn>
+#### 额外的页脚
 在浮层中加入额外的页脚，以满足某些定制信息的需求。
+</cn>
 
-## en-US
-
+<us>
+#### Extra Footer
 Render extra footer in panel for customized requirements.
+</us>
 
-````jsx
-import { DatePicker } from 'antd';
-const { RangePicker, MonthPicker } = DatePicker;
-
-ReactDOM.render(
+```html
+<template>
   <div>
-    <DatePicker renderExtraFooter={() => 'extra footer'} />
-    <DatePicker renderExtraFooter={() => 'extra footer'} showTime />
-    <RangePicker renderExtraFooter={() => 'extra footer'} />
-    <RangePicker renderExtraFooter={() => 'extra footer'} showTime />
-    <MonthPicker renderExtraFooter={() => 'extra footer'} placeholder="Select month" />
+    <a-date-picker>
+      <template slot="renderExtraFooter">
+        extra footer
+      </template>
+    </a-date-picker>
+    <a-date-picker showTime >
+      <template slot="renderExtraFooter">
+        extra footer
+      </template>
+    </a-date-picker>
+    <a-range-picker >
+      <template slot="renderExtraFooter">
+        extra footer
+      </template>
+    </a-range-picker>
+    <a-range-picker showTime >
+      <template slot="renderExtraFooter">
+        extra footer
+      </template>
+    </a-range-picker>
+    <a-month-picker placeholder="Select month" >
+      <template slot="renderExtraFooter">
+        extra footer
+      </template>
+    </a-month-picker>
   </div>
-, mountNode);
-````
+</template>
+```
diff --git a/components/date-picker/demo/format.md b/components/date-picker/demo/format.md
index 60cb0a584..81b746222 100644
--- a/components/date-picker/demo/format.md
+++ b/components/date-picker/demo/format.md
@@ -1,35 +1,40 @@
----
-order: 1
-title:
-  zh-CN: 日期格式
-  en-US: Date Format
----
-
-## zh-CN
 
+<cn>
+#### 日期格式
 使用 `format` 属性，可以自定义日期显示格式。
+</cn>
 
-## en-US
-
+<us>
+#### Date Format
 We can set the date format by `format`.
+</us>
 
-````jsx
-import { DatePicker } from 'antd';
-import moment from 'moment';
-const { MonthPicker, RangePicker } = DatePicker;
-
-const dateFormat = 'YYYY/MM/DD';
-const monthFormat = 'YYYY/MM';
-ReactDOM.render(
+```html
+<template>
   <div>
-    <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
+    <a-date-picker :defaultValue="moment('2015/01/01', dateFormat)" :format="dateFormat" />
     <br />
-    <MonthPicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} />
+    <a-month-picker :defaultValue="moment('2015/01', monthFormat)" :format="monthFormat" />
     <br />
-    <RangePicker
-      defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
-      format={dateFormat}
+    <a-range-picker
+      :defaultValue="[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]"
+      :format="dateFormat"
     />
   </div>
-, mountNode);
-````
+</template>
+<script>
+import moment from 'moment';
+export default {
+  data(){
+    return {
+      dateFormat: 'YYYY/MM/DD',
+      monthFormat: 'YYYY/MM',
+    }
+  },
+  methods: {
+    moment,
+  }
+}
+</script>
+```
+
diff --git a/components/date-picker/demo/mode.md b/components/date-picker/demo/mode.md
index 4bd78df8c..23016b38e 100644
--- a/components/date-picker/demo/mode.md
+++ b/components/date-picker/demo/mode.md
@@ -1,82 +1,61 @@
----
-order: 11
-title:
-  zh-CN: 受控面板
-  en-US: Controlled Panels
----
-
-## zh-CN
 
+<cn>
+#### 受控面板
 通过组合 `mode` 与 `onPanelChange` 控制要展示的面板。
+</cn>
 
-## en-US
-
+<us>
+#### Controlled Panels
 Determing which panel to show with `mode` and `onPanelChange`.
+</us>
 
-````jsx
-import { DatePicker } from 'antd';
-const { RangePicker } = DatePicker;
-
-class ControlledDatePicker extends React.Component {
-  state = { mode: 'time' };
-
-  handleOpenChange = (open) => {
-    if (open) {
-      this.setState({ mode: 'time' });
+```html
+<template>
+  <div>
+    <a-date-picker
+      :mode="mode1"
+      showTime
+      @openChange="handleOpenChange1"
+      @panelChange="handlePanelChange1"
+    />
+    <br />
+    <a-range-picker
+      :placeholder="['Start month', 'End month']"
+      format="YYYY-MM"
+      :value="value"
+      :mode="mode2"
+      @panelChange="handlePanelChange2"
+    />
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return {
+      mode1: 'time',
+      mode2: ['month', 'month'],
+      value: [],
     }
-  }
+  },
+  methods: {
+    handleOpenChange1(open) {
+      if (open) {
+        this.mode1 = 'time'
+      }
+    },
 
-  handlePanelChange = (value, mode) => {
-    this.setState({ mode });
-  }
-
-  render() {
-    return (
-      <DatePicker
-        mode={this.state.mode}
-        showTime
-        onOpenChange={this.handleOpenChange}
-        onPanelChange={this.handlePanelChange}
-      />
-    );
-  }
-}
-
-class ControlledRangePicker extends React.Component {
-  state = {
-    mode: ['month', 'month'],
-    value: [],
-  };
-
-  handlePanelChange = (value, mode) => {
-    this.setState({
-      value,
-      mode: [
+    handlePanelChange1(value, mode) {
+      this.mode1 = mode
+    },
+    handlePanelChange2 (value, mode) {
+      this.value = value
+      this.mode2 = [
         mode[0] === 'date' ? 'month' : mode[0],
         mode[1] === 'date' ? 'month' : mode[1],
-      ],
-    });
-  }
-
-  render() {
-    const { value, mode } = this.state;
-    return (
-      <RangePicker
-        placeholder={['Start month', 'End month']}
-        format="YYYY-MM"
-        value={value}
-        mode={mode}
-        onPanelChange={this.handlePanelChange}
-      />
-    );
+      ]
+    },
   }
 }
+</script>
+```
 
-ReactDOM.render(
-  <div>
-    <ControlledDatePicker />
-    <br />
-    <ControlledRangePicker />
-  </div>
-, mountNode);
-````
diff --git a/components/date-picker/interface.js b/components/date-picker/interface.js
index d8c2b4203..04e222e08 100644
--- a/components/date-picker/interface.js
+++ b/components/date-picker/interface.js
@@ -41,7 +41,7 @@ export const SinglePickerProps = () => ({
 
 export const DatePickerProps = () => ({
   ...PickerProps(), ...SinglePickerProps(),
-  showTime: PropTypes.oneOfType([PropTypes.shape(TimePickerProps()).loose, PropTypes.bool]),
+  showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   open: PropTypes.bool,
   disabledTime: PropTypes.func,
   // onOpenChange?: (status: bool) => void;
@@ -54,9 +54,15 @@ export const MonthPickerProps = () => ({
   placeholder: PropTypes.string,
   monthCellContentRender: PropTypes.func,
 })
+function isMomentArray (value) {
+  if (Array.isArray(value)) {
+    return value.length === 0 || !!value.find((val) => val === undefined || moment.isMoment(val))
+  }
+  return false
+}
 
-export const RangePickerValue = PropTypes.arrayOf(MomentType)
-export const RangePickerPresetRange = PropTypes.oneOfType([RangePickerValue, PropTypes.func])
+export const RangePickerValue = PropTypes.custom(isMomentArray)
+// export const RangePickerPresetRange = PropTypes.oneOfType([RangePickerValue, PropTypes.func])
 
 export const RangePickerProps = () => ({
   ...PickerProps(),
@@ -66,7 +72,7 @@ export const RangePickerProps = () => ({
   // onChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
   // onCalendarChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
   // onOk?: (selectedTime: moment.Moment) => void;
-  showTime: PropTypes.oneOfType([PropTypes.shape(TimePickerProps()).loose, PropTypes.bool]),
+  showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   ranges: PropTypes.objectOf(String),
   placeholder: PropTypes.arrayOf(String),
   mode: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(String)]),
diff --git a/components/date-picker/wrapPicker.js b/components/date-picker/wrapPicker.js
index 8aa1f6076..dae9ed41f 100644
--- a/components/date-picker/wrapPicker.js
+++ b/components/date-picker/wrapPicker.js
@@ -131,7 +131,11 @@ export default function wrapPicker (Picker, props, defaultFormat) {
         return (
           <Picker
             {...pickerProps}
-          />
+          >
+            <template slot='renderExtraFooter'>
+              {this.$slots.renderExtraFooter}
+            </template>
+          </Picker>
         )
       },
     },