diff --git a/components/date-picker/InputIcon.js b/components/date-picker/InputIcon.js
index ea23a6a71..1836802e7 100644
--- a/components/date-picker/InputIcon.js
+++ b/components/date-picker/InputIcon.js
@@ -1,20 +1,22 @@
 import CalendarOutlined from '@ant-design/icons-vue/CalendarOutlined';
 import { isValidElement } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
+import classNames from 'classnames';
 
-export default {
-  functional: true,
-  render(h, context) {
-    const { props } = context;
-    const { suffixIcon, prefixCls } = props;
-    return (
-      (suffixIcon && isValidElement(suffixIcon) ? (
-        cloneElement(suffixIcon, {
-          class: `${prefixCls}-picker-icon`,
-        })
-      ) : (
-        <span class={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
-      )) || <CalendarOutlined class={`${prefixCls}-picker-icon`} />
-    );
-  },
+const InputIcon = (_, { attrs }) => {
+  const { suffixIcon, prefixCls } = attrs;
+  return (
+    (suffixIcon && isValidElement(suffixIcon) ? (
+      cloneElement(suffixIcon, {
+        class: classNames({
+          [suffixIcon.props?.class]: suffixIcon.props.class,
+          [`${prefixCls}-picker-icon`]: true,
+        }),
+      })
+    ) : (
+      <span class={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
+    )) || <CalendarOutlined class={`${prefixCls}-picker-icon`} />
+  );
 };
+InputIcon.inheritAttrs = false;
+export default InputIcon;
diff --git a/components/date-picker/RangePicker.jsx b/components/date-picker/RangePicker.jsx
index 2bd257f12..96d9fa74c 100644
--- a/components/date-picker/RangePicker.jsx
+++ b/components/date-picker/RangePicker.jsx
@@ -1,3 +1,4 @@
+import { inject } from 'vue';
 import * as moment from 'moment';
 import RangeCalendar from '../vc-calendar/src/RangeCalendar';
 import VcDatePicker from '../vc-calendar/src/Picker';
@@ -8,19 +9,11 @@ import Tag from '../tag';
 import { ConfigConsumerProps } from '../config-provider';
 import interopDefault from '../_util/interopDefault';
 import { RangePickerProps } from './interface';
-import {
-  hasProp,
-  getOptionProps,
-  initDefaultProps,
-  mergeProps,
-  getComponent,
-  getListeners,
-} from '../_util/props-util';
+import { hasProp, getOptionProps, initDefaultProps, getComponent } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { formatDate } from './utils';
 import InputIcon from './InputIcon';
 
-function noop() {}
 function getShowDateFromValue(value, mode) {
   const [start, end] = value;
   // value could be an empty array, then we should not reset showDate
@@ -70,17 +63,16 @@ function fixLocale(value, localeCode) {
 export default {
   name: 'ARangePicker',
   mixins: [BaseMixin],
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
+  inheritAttrs: false,
   props: initDefaultProps(RangePickerProps(), {
     allowClear: true,
     showToday: false,
     separator: '~',
   }),
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   data() {
     const value = this.value || this.defaultValue || [];
@@ -133,6 +125,10 @@ export default {
         this.setState({ sOpen: false });
       }
     },
+
+    savePicker(node) {
+      this.picker = node;
+    },
     clearSelection(e) {
       e.preventDefault();
       e.stopPropagation();
@@ -212,18 +208,17 @@ export default {
     },
 
     focus() {
-      this.$refs.picker.focus();
+      this.picker.focus();
     },
 
     blur() {
-      this.$refs.picker.blur();
+      this.picker.blur();
     },
 
     renderFooter() {
-      const { ranges, $scopedSlots, $slots } = this;
+      const { ranges, $slots } = this;
       const { _prefixCls: prefixCls, _tagPrefixCls: tagPrefixCls } = this;
-      const renderExtraFooter =
-        this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter;
+      const renderExtraFooter = this.renderExtraFooter || $slots.renderExtraFooter;
       if (!ranges && !renderExtraFooter) {
         return null;
       }
@@ -261,7 +256,7 @@ export default {
   },
 
   render() {
-    const props = getOptionProps(this);
+    const props = { ...getOptionProps(this), ...this.$attrs };
     let suffixIcon = getComponent(this, 'suffixIcon');
     suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
     const {
@@ -269,16 +264,8 @@ export default {
       sShowDate: showDate,
       sHoverValue: hoverValue,
       sOpen: open,
-      $scopedSlots,
+      $slots,
     } = this;
-    const listeners = getListeners(this);
-    const {
-      calendarChange = noop,
-      ok = noop,
-      focus = noop,
-      blur = noop,
-      panelChange = noop,
-    } = listeners;
     const {
       prefixCls: customizePrefixCls,
       tagPrefixCls: customizeTagPrefixCls,
@@ -293,6 +280,12 @@ export default {
       format,
       separator,
       inputReadOnly,
+      style,
+      onCalendarChange,
+      onOk,
+      onBlur,
+      onFocus,
+      onPanelChange,
     } = props;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('calendar', customizePrefixCls);
@@ -300,7 +293,7 @@ export default {
     this._prefixCls = prefixCls;
     this._tagPrefixCls = tagPrefixCls;
 
-    const dateRender = props.dateRender || $scopedSlots.dateRender;
+    const dateRender = props.dateRender || $slots.dateRender;
     fixLocale(value, localeCode);
     fixLocale(showDate, localeCode);
 
@@ -311,23 +304,18 @@ export default {
 
     // 需要选择时间时，点击 ok 时才触发 onChange
     const pickerChangeHandler = {
-      on: {
-        change: this.handleChange,
-      },
+      onChange: this.handleChange,
     };
     let calendarProps = {
-      on: {
-        ok: this.handleChange,
-      },
-      props: {},
+      onOk: this.handleChange,
     };
     if (props.timePicker) {
-      pickerChangeHandler.on.change = changedValue => this.handleChange(changedValue);
+      pickerChangeHandler.onChange = changedValue => this.handleChange(changedValue);
     } else {
-      calendarProps = { on: {}, props: {} };
+      calendarProps = {};
     }
     if ('mode' in props) {
-      calendarProps.props.mode = props.mode;
+      calendarProps.mode = props.mode;
     }
 
     const startPlaceholder = Array.isArray(props.placeholder)
@@ -337,35 +325,31 @@ export default {
       ? props.placeholder[1]
       : locale.lang.rangePlaceholder[1];
 
-    const rangeCalendarProps = mergeProps(calendarProps, {
-      props: {
-        separator,
-        format,
-        prefixCls,
-        renderFooter: this.renderFooter,
-        timePicker: props.timePicker,
-        disabledDate,
-        disabledTime,
-        dateInputPlaceholder: [startPlaceholder, endPlaceholder],
-        locale: locale.lang,
-        dateRender,
-        value: showDate,
-        hoverValue,
-        showToday,
-        inputReadOnly,
-      },
-      on: {
-        change: calendarChange,
-        ok,
-        valueChange: this.handleShowDateChange,
-        hoverChange: this.handleHoverChange,
-        panelChange,
-        inputSelect: this.handleCalendarInputSelect,
-      },
+    const rangeCalendarProps = {
+      ...calendarProps,
+      separator,
+      format,
+      prefixCls,
+      renderFooter: this.renderFooter,
+      timePicker: props.timePicker,
+      disabledDate,
+      disabledTime,
+      dateInputPlaceholder: [startPlaceholder, endPlaceholder],
+      locale: locale.lang,
+      dateRender,
+      value: showDate,
+      hoverValue,
+      showToday,
+      inputReadOnly,
+      onChange: onCalendarChange,
+      onOk,
+      onValueChange: this.handleShowDateChange,
+      onHoverChange: this.handleHoverChange,
+      onPanelChange,
+      onInputSelect: this.handleCalendarInputSelect,
       class: calendarClassName,
-      scopedSlots: $scopedSlots,
-    });
-    const calendar = <RangeCalendar {...rangeCalendarProps} />;
+    };
+    const calendar = <RangeCalendar {...rangeCalendarProps} vSlots={$slots} />;
 
     // default width for showTime
     const pickerStyle = {};
@@ -406,38 +390,31 @@ export default {
         </span>
       );
     };
-    const vcDatePickerProps = mergeProps(
-      {
-        props,
-        on: listeners,
-      },
-      pickerChangeHandler,
-      {
-        props: {
-          calendar,
-          value,
-          open,
-          prefixCls: `${prefixCls}-picker-container`,
-        },
-        on: {
-          openChange: this.handleOpenChange,
-        },
-        style: popupStyle,
-        scopedSlots: { default: input, ...$scopedSlots },
-      },
-    );
+    const vcDatePickerProps = {
+      ...props,
+      ...pickerChangeHandler,
+      calendar,
+      value,
+      open,
+      prefixCls: `${prefixCls}-picker-container`,
+      onOpenChange: this.handleOpenChange,
+      style: popupStyle,
+    };
     return (
       <span
-        ref="picker"
+        ref={this.savePicker}
+        id={props.id}
+        class={classNames(props.class, props.pickerClass)}
+        style={{ ...style, ...pickerStyle }}
         class={props.pickerClass}
         style={pickerStyle}
         tabindex={props.disabled ? -1 : 0}
-        onFocus={focus}
-        onBlur={blur}
+        onFocus={onFocus}
+        onBlur={onBlur}
         onMouseenter={this.onMouseEnter}
         onMouseleave={this.onMouseLeave}
       >
-        <VcDatePicker {...vcDatePickerProps} />
+        <VcDatePicker {...vcDatePickerProps} vSlots={$slots} children={input}></VcDatePicker>
       </span>
     );
   },
diff --git a/components/date-picker/WeekPicker.jsx b/components/date-picker/WeekPicker.jsx
index ed3f76ceb..039856caf 100644
--- a/components/date-picker/WeekPicker.jsx
+++ b/components/date-picker/WeekPicker.jsx
@@ -1,15 +1,11 @@
+import { inject } from 'vue';
 import * as moment from 'moment';
 import Calendar from '../vc-calendar';
 import VcDatePicker from '../vc-calendar/src/Picker';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import { ConfigConsumerProps } from '../config-provider';
-import {
-  hasProp,
-  getOptionProps,
-  initDefaultProps,
-  getComponent,
-  getListeners,
-} from '../_util/props-util';
+import { hasProp, getOptionProps, initDefaultProps, getComponent } from '../_util/props-util';
+import classNames from 'classnames';
 import BaseMixin from '../_util/BaseMixin';
 import { WeekPickerProps } from './interface';
 import interopDefault from '../_util/interopDefault';
@@ -21,24 +17,17 @@ function formatValue(value, format) {
 function noop() {}
 
 export default {
-  // static defaultProps = {
-  //   format: 'YYYY-wo',
-  //   allowClear: true,
-  // };
-
-  // private input: any;
   name: 'AWeekPicker',
   mixins: [BaseMixin],
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
+  inheritAttrs: false,
   props: initDefaultProps(WeekPickerProps(), {
     format: 'gggg-wo',
     allowClear: true,
   }),
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   data() {
     const value = this.value || this.defaultValue;
@@ -82,10 +71,13 @@ export default {
     });
   },
   methods: {
+    saveInput(node) {
+      this.input = node;
+    },
     weekDateRender(current) {
       const selectedValue = this.$data._value;
-      const { _prefixCls: prefixCls, $scopedSlots } = this;
-      const dateRender = this.dateRender || $scopedSlots.dateRender;
+      const { _prefixCls: prefixCls, $slots } = this;
+      const dateRender = this.dateRender || $slots.dateRender;
       const dateNode = dateRender ? dateRender(current) : current.date();
       if (
         selectedValue &&
@@ -118,15 +110,15 @@ export default {
       this.handleChange(null);
     },
     focus() {
-      this.$refs.input.focus();
+      this.input.focus();
     },
 
     blur() {
-      this.$refs.input.blur();
+      this.input.blur();
     },
     renderFooter(...args) {
-      const { _prefixCls: prefixCls, $scopedSlots } = this;
-      const renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter;
+      const { _prefixCls: prefixCls, $slots } = this;
+      const renderExtraFooter = this.renderExtraFooter || $slots.renderExtraFooter;
       return renderExtraFooter ? (
         <div class={`${prefixCls}-footer-extra`}>{renderExtraFooter(...args)}</div>
       ) : null;
@@ -134,7 +126,7 @@ export default {
   },
 
   render() {
-    const props = getOptionProps(this);
+    const props = { ...getOptionProps(this), ...this.$attrs };
     let suffixIcon = getComponent(this, 'suffixIcon');
     suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
     const {
@@ -150,22 +142,21 @@ export default {
       disabledDate,
       defaultPickerValue,
       $data,
-      $scopedSlots,
+      $slots,
     } = this;
-    const listeners = getListeners(this);
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('calendar', customizePrefixCls);
     this._prefixCls = prefixCls;
 
     const { _value: pickerValue, _open: open } = $data;
-    const { focus = noop, blur = noop } = listeners;
+    const { class: className, style, id, onFocus = noop, onBlur = noop } = props;
 
     if (pickerValue && localeCode) {
       pickerValue.locale(localeCode);
     }
 
     const placeholder = hasProp(this, 'placeholder') ? this.placeholder : locale.lang.placeholder;
-    const weekDateRender = this.dateRender || $scopedSlots.dateRender || this.weekDateRender;
+    const weekDateRender = this.dateRender || $slots.dateRender || this.weekDateRender;
     const calendar = (
       <Calendar
         showWeekNumber
@@ -191,14 +182,14 @@ export default {
       return (
         <span style={{ display: 'inline-block', width: '100%' }}>
           <input
-            ref="input"
+            ref={this.saveInput}
             disabled={disabled}
             readonly
             value={(value && value.format(format)) || ''}
             placeholder={placeholder}
             class={pickerInputClass}
-            onFocus={focus}
-            onBlur={blur}
+            onFocus={onFocus}
+            onBlur={onBlur}
           />
           {clearIcon}
           {inputIcon}
@@ -206,24 +197,18 @@ export default {
       );
     };
     const vcDatePickerProps = {
-      props: {
-        ...props,
-        calendar,
-        prefixCls: `${prefixCls}-picker-container`,
-        value: pickerValue,
-        open,
-      },
-      on: {
-        ...listeners,
-        change: this.handleChange,
-        openChange: this.handleOpenChange,
-      },
+      ...props,
+      calendar,
+      prefixCls: `${prefixCls}-picker-container`,
+      value: pickerValue,
+      open,
+      onChange: this.handleChange,
+      onOpenChange: this.handleOpenChange,
       style: popupStyle,
-      scopedSlots: { default: input, ...$scopedSlots },
     };
     return (
-      <span class={pickerClass}>
-        <VcDatePicker {...vcDatePickerProps} />
+      <span class={classNames(className, pickerClass)} style={style} id={id}>
+        <VcDatePicker {...vcDatePickerProps} vSlots={$slots} children={input}></VcDatePicker>
       </span>
     );
   },
diff --git a/components/date-picker/createPicker.js b/components/date-picker/createPicker.js
index c7a7bf37e..bab5b65a7 100644
--- a/components/date-picker/createPicker.js
+++ b/components/date-picker/createPicker.js
@@ -1,3 +1,4 @@
+import { inject } from 'vue';
 import * as moment from 'moment';
 import omit from 'lodash/omit';
 import MonthCalendar from '../vc-calendar/src/MonthCalendar';
@@ -12,10 +13,8 @@ import {
   hasProp,
   getOptionProps,
   initDefaultProps,
-  mergeProps,
   getComponent,
   isValidElement,
-  getListeners,
 } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import { formatDate } from './utils';
@@ -24,20 +23,18 @@ import { formatDate } from './utils';
 //   value?: moment.Moment;
 //   prefixCls: string;
 // }
-function noop() {}
 export default function createPicker(TheCalendar, props) {
   return {
+    inheritAttrs: false,
     props: initDefaultProps(props, {
       allowClear: true,
       showToday: true,
     }),
     mixins: [BaseMixin],
-    model: {
-      prop: 'value',
-      event: 'change',
-    },
-    inject: {
-      configProvider: { default: () => ConfigConsumerProps },
+    setup() {
+      return {
+        configProvider: inject('configProvider', ConfigConsumerProps),
+      };
     },
     data() {
       const value = this.value || this.defaultValue;
@@ -79,6 +76,9 @@ export default function createPicker(TheCalendar, props) {
       },
     },
     methods: {
+      saveInput(node) {
+        this.input = node;
+      },
       clearSelection(e) {
         e.preventDefault();
         e.stopPropagation();
@@ -106,16 +106,15 @@ export default function createPicker(TheCalendar, props) {
         this.$emit('openChange', open);
       },
       focus() {
-        this.$refs.input.focus();
+        this.input.focus();
       },
 
       blur() {
-        this.$refs.input.blur();
+        this.input.blur();
       },
       renderFooter(...args) {
-        const { $scopedSlots, $slots, _prefixCls: prefixCls } = this;
-        const renderExtraFooter =
-          this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter;
+        const { $slots, _prefixCls: prefixCls } = this;
+        const renderExtraFooter = this.renderExtraFooter || $slots.renderExtraFooter;
         return renderExtraFooter ? (
           <div class={`${prefixCls}-footer-extra`}>
             {typeof renderExtraFooter === 'function'
@@ -133,22 +132,19 @@ export default function createPicker(TheCalendar, props) {
     },
 
     render() {
-      const { $scopedSlots } = this;
+      const { $slots } = this;
       const { sValue: value, showDate, _open: open } = this.$data;
       let suffixIcon = getComponent(this, 'suffixIcon');
       suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
-      const listeners = getListeners(this);
-      const { panelChange = noop, focus = noop, blur = noop, ok = noop } = listeners;
-      const props = getOptionProps(this);
+      const props = omit({ ...getOptionProps(this), ...this.$attrs }, ['onChange']);
 
       const { prefixCls: customizePrefixCls, locale, localeCode, inputReadOnly } = props;
       const getPrefixCls = this.configProvider.getPrefixCls;
       const prefixCls = getPrefixCls('calendar', customizePrefixCls);
       this._prefixCls = prefixCls;
 
-      const dateRender = props.dateRender || $scopedSlots.dateRender;
-      const monthCellContentRender =
-        props.monthCellContentRender || $scopedSlots.monthCellContentRender;
+      const dateRender = props.dateRender || $slots.dateRender;
+      const monthCellContentRender = props.monthCellContentRender || $slots.monthCellContentRender;
       const placeholder = 'placeholder' in props ? props.placeholder : locale.lang.placeholder;
 
       const disabledTime = props.showTime ? props.disabledTime : null;
@@ -162,45 +158,41 @@ export default function createPicker(TheCalendar, props) {
         value.locale(localeCode);
       }
 
-      const pickerProps = { props: {}, on: {} };
-      const calendarProps = { props: {}, on: {} };
+      const pickerProps = {};
+      const calendarProps = {};
       const pickerStyle = {};
       if (props.showTime) {
         // fix https://github.com/ant-design/ant-design/issues/1902
-        calendarProps.on.select = this.handleChange;
+        calendarProps.onSelect = this.handleChange;
         pickerStyle.minWidth = '195px';
       } else {
-        pickerProps.on.change = this.handleChange;
+        pickerProps.onChange = this.handleChange;
       }
       if ('mode' in props) {
-        calendarProps.props.mode = props.mode;
+        calendarProps.mode = props.mode;
       }
-      const theCalendarProps = mergeProps(calendarProps, {
-        props: {
-          disabledDate: props.disabledDate,
-          disabledTime,
-          locale: locale.lang,
-          timePicker: props.timePicker,
-          defaultValue: props.defaultPickerValue || interopDefault(moment)(),
-          dateInputPlaceholder: placeholder,
-          prefixCls,
-          dateRender,
-          format: props.format,
-          showToday: props.showToday,
-          monthCellContentRender,
-          renderFooter: this.renderFooter,
-          value: showDate,
-          inputReadOnly,
-        },
-        on: {
-          ok,
-          panelChange,
-          change: this.handleCalendarChange,
-        },
+      const theCalendarProps = {
+        ...calendarProps,
+        disabledDate: props.disabledDate,
+        disabledTime,
+        locale: locale.lang,
+        timePicker: props.timePicker,
+        defaultValue: props.defaultPickerValue || interopDefault(moment)(),
+        dateInputPlaceholder: placeholder,
+        prefixCls,
+        dateRender,
+        format: props.format,
+        showToday: props.showToday,
+        monthCellContentRender,
+        renderFooter: this.renderFooter,
+        value: showDate,
+        inputReadOnly,
+        onOk: props.onOk,
+        onPanelChange: props.onPanelChange,
+        onChange: this.handleCalendarChange,
         class: calendarClassName,
-        scopedSlots: $scopedSlots,
-      });
-      const calendar = <TheCalendar {...theCalendarProps} />;
+      };
+      const calendar = <TheCalendar {...theCalendarProps} vSlots={$slots} />;
 
       const clearIcon =
         !props.disabled && props.allowClear && value ? (
@@ -219,10 +211,10 @@ export default function createPicker(TheCalendar, props) {
       const input = ({ value: inputValue }) => (
         <div>
           <input
-            ref="input"
+            ref={this.saveInput}
             disabled={props.disabled}
-            onFocus={focus}
-            onBlur={blur}
+            onFocus={props.onFocus}
+            onBlur={props.onBlur}
             readonly
             value={formatDate(inputValue, this.format)}
             placeholder={placeholder}
@@ -235,33 +227,28 @@ export default function createPicker(TheCalendar, props) {
         </div>
       );
       const vcDatePickerProps = {
-        props: {
-          ...props,
-          ...pickerProps.props,
-          calendar,
-          value,
-          prefixCls: `${prefixCls}-picker-container`,
-        },
-        on: {
-          ...omit(listeners, 'change'),
-          ...pickerProps.on,
-          open,
-          onOpenChange: this.handleOpenChange,
-        },
+        ...props,
+        ...pickerProps,
+        calendar,
+        value,
+        prefixCls: `${prefixCls}-picker-container`,
+        open,
+        onOpenChange: this.handleOpenChange,
         style: props.popupStyle,
-        scopedSlots: { default: input, ...$scopedSlots },
+        children: input,
       };
       return (
         <span
-          class={props.pickerClass}
-          style={pickerStyle}
+          id={props.id}
+          class={classNames(props.class, props.pickerClass)}
+          style={{ ...pickerStyle, ...props.style }}
           // tabindex={props.disabled ? -1 : 0}
           // onFocus={focus}
           // onBlur={blur}
           onMouseenter={this.onMouseEnter}
           onMouseleave={this.onMouseLeave}
         >
-          <VcDatePicker {...vcDatePickerProps} />
+          <VcDatePicker {...vcDatePickerProps} vSlots={omit($slots, ['default'])}></VcDatePicker>
         </span>
       );
     },
diff --git a/components/date-picker/index.js b/components/date-picker/index.js
index db7fa57f8..e96e68e33 100755
--- a/components/date-picker/index.js
+++ b/components/date-picker/index.js
@@ -5,7 +5,6 @@ import wrapPicker from './wrapPicker';
 import RangePicker from './RangePicker';
 import WeekPicker from './WeekPicker';
 import { DatePickerProps, MonthPickerProps, WeekPickerProps, RangePickerProps } from './interface';
-import Base from '../base';
 
 const DatePicker = wrapPicker(
   { ...createPicker(VcCalendar, DatePickerProps()), name: 'ADatePicker' },
@@ -26,12 +25,11 @@ Object.assign(DatePicker, {
 });
 
 /* istanbul ignore next */
-DatePicker.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(DatePicker.name, DatePicker);
-  Vue.component(DatePicker.RangePicker.name, DatePicker.RangePicker);
-  Vue.component(DatePicker.MonthPicker.name, DatePicker.MonthPicker);
-  Vue.component(DatePicker.WeekPicker.name, DatePicker.WeekPicker);
+DatePicker.install = function(app) {
+  app.component(DatePicker.name, DatePicker);
+  app.component(DatePicker.RangePicker.name, DatePicker.RangePicker);
+  app.component(DatePicker.MonthPicker.name, DatePicker.MonthPicker);
+  app.component(DatePicker.WeekPicker.name, DatePicker.WeekPicker);
 };
 
 export default DatePicker;
diff --git a/components/date-picker/interface.js b/components/date-picker/interface.js
index 03ba64c35..fdaa4fe10 100644
--- a/components/date-picker/interface.js
+++ b/components/date-picker/interface.js
@@ -18,7 +18,6 @@ export const PickerProps = () => ({
   size: PropTypes.oneOf(['large', 'small', 'default']),
   getCalendarContainer: PropTypes.func,
   open: PropTypes.bool,
-  // onOpenChange: PropTypes.(status: bool) => void,
   disabledDate: PropTypes.func,
   showToday: PropTypes.bool,
   dateRender: PropTypes.any, // (current: moment.Moment, today: moment.Moment) => React.ReactNode,
@@ -31,6 +30,12 @@ export const PickerProps = () => ({
   align: PropTypes.object.def(() => ({})),
   inputReadOnly: PropTypes.bool,
   valueFormat: PropTypes.string,
+  onOpenChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  'onUpdate:value': PropTypes.func,
+  onMouseenter: PropTypes.func,
+  onMouseleave: PropTypes.func,
 });
 
 export const SinglePickerProps = () => ({
@@ -39,7 +44,7 @@ export const SinglePickerProps = () => ({
   defaultPickerValue: TimeType,
   renderExtraFooter: PropTypes.any,
   placeholder: PropTypes.string,
-  // onChange?: (date: moment.Moment, dateString: string) => void;
+  onChange: PropTypes.func,
 });
 
 export const DatePickerProps = () => ({
@@ -48,9 +53,10 @@ export const DatePickerProps = () => ({
   showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   open: PropTypes.bool,
   disabledTime: PropTypes.func,
-  // onOpenChange?: (status: bool) => void;
-  // onOk?: (selectedTime: moment.Moment) => void;
   mode: PropTypes.oneOf(['time', 'date', 'month', 'year']),
+  onOpenChange: PropTypes.func,
+  onPanelChange: PropTypes.func,
+  onOk: PropTypes.func,
 });
 
 export const MonthPickerProps = () => ({
@@ -68,9 +74,6 @@ export const RangePickerProps = () => ({
   defaultValue: TimesType,
   defaultPickerValue: TimesType,
   timePicker: PropTypes.any,
-  // onChange?: (dates: TimesType, dateStrings: [string, string]) => void;
-  // onCalendarChange?: (dates: TimesType, dateStrings: [string, string]) => void;
-  // onOk?: (selectedTime: moment.Moment) => void;
   showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   ranges: PropTypes.object,
   placeholder: PropTypes.arrayOf(String),
@@ -79,7 +82,12 @@ export const RangePickerProps = () => ({
   disabledTime: PropTypes.func,
   showToday: PropTypes.bool,
   renderExtraFooter: PropTypes.any,
-  // onPanelChange?: (value?: TimesType, mode?: string | string[]) => void;
+  onChange: PropTypes.func,
+  onCalendarChange: PropTypes.func,
+  onOk: PropTypes.func,
+  onPanelChange: PropTypes.func,
+  onMouseenter: PropTypes.func,
+  onMouseleave: PropTypes.func,
 });
 
 export const WeekPickerProps = () => ({
diff --git a/components/date-picker/wrapPicker.js b/components/date-picker/wrapPicker.js
index 784cd5938..3c91f9d47 100644
--- a/components/date-picker/wrapPicker.js
+++ b/components/date-picker/wrapPicker.js
@@ -1,9 +1,10 @@
+import { provide, inject } from 'vue';
 import TimePickerPanel from '../vc-time-picker/Panel';
 import classNames from 'classnames';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { generateShowHourMinuteSecond } from '../time-picker';
 import enUS from './locale/en_US';
-import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
+import { getOptionProps, initDefaultProps } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import { checkValidate, stringToMoment, momentToString } from '../_util/moment-util';
 
@@ -41,23 +42,24 @@ function getColumns({ showHour, showMinute, showSecond, use12Hours }) {
 export default function wrapPicker(Picker, props, pickerType) {
   return {
     name: Picker.name,
+    inheritAttrs: false,
     props: initDefaultProps(props, {
       transitionName: 'slide-up',
       popupStyle: {},
       locale: {},
     }),
-    model: {
-      prop: 'value',
-      event: 'change',
-    },
-    inject: {
-      configProvider: { default: () => ConfigConsumerProps },
-    },
-    provide() {
+    // model: {
+    //   prop: 'value',
+    //   event: 'change',
+    // },
+    setup() {
       return {
-        savePopupRef: this.savePopupRef,
+        configProvider: inject('configProvider', ConfigConsumerProps),
       };
     },
+    created() {
+      provide('savePopupRef', this.savePopupRef);
+    },
     mounted() {
       const { autofocus, disabled, value, defaultValue, valueFormat } = this;
       checkValidate('DatePicker', defaultValue, 'defaultValue', valueFormat);
@@ -74,6 +76,9 @@ export default function wrapPicker(Picker, props, pickerType) {
       },
     },
     methods: {
+      savePicker(node) {
+        this.picker = node;
+      },
       getDefaultLocale() {
         const result = {
           ...enUS,
@@ -109,11 +114,9 @@ export default function wrapPicker(Picker, props, pickerType) {
         this.$emit('mouseleave', e);
       },
       handleChange(date, dateString) {
-        this.$emit(
-          'change',
-          this.valueFormat ? momentToString(date, this.valueFormat) : date,
-          dateString,
-        );
+        const value = this.valueFormat ? momentToString(date, this.valueFormat) : date;
+        this.$emit('update:value', value);
+        this.$emit('change', value, dateString);
       },
       handleOk(val) {
         this.$emit('ok', this.valueFormat ? momentToString(val, this.valueFormat) : val);
@@ -126,11 +129,11 @@ export default function wrapPicker(Picker, props, pickerType) {
         );
       },
       focus() {
-        this.$refs.picker.focus();
+        this.picker.focus();
       },
 
       blur() {
-        this.$refs.picker.blur();
+        this.picker.blur();
       },
 
       transformValue(props) {
@@ -146,7 +149,7 @@ export default function wrapPicker(Picker, props, pickerType) {
       },
 
       renderPicker(locale, localeCode) {
-        const props = getOptionProps(this);
+        const props = { ...getOptionProps(this), ...this.$attrs };
         this.transformValue(props);
         const {
           prefixCls: customizePrefixCls,
@@ -186,54 +189,35 @@ export default function wrapPicker(Picker, props, pickerType) {
         const columns = getColumns(vcTimePickerProps);
         const timePickerCls = `${prefixCls}-time-picker-column-${columns}`;
         const timePickerPanelProps = {
-          props: {
-            ...vcTimePickerProps,
-            ...showTime,
-            prefixCls: `${prefixCls}-time-picker`,
-            placeholder: locale.timePickerLocale.placeholder,
-            transitionName: 'slide-up',
-          },
+          ...vcTimePickerProps,
+          ...showTime,
+          prefixCls: `${prefixCls}-time-picker`,
+          placeholder: locale.timePickerLocale.placeholder,
+          transitionName: 'slide-up',
           class: timePickerCls,
-          on: {
-            esc: () => {},
-          },
+          onEsc: () => {},
         };
         const timePicker = showTime ? <TimePickerPanel {...timePickerPanelProps} /> : null;
         const pickerProps = {
-          props: {
-            ...props,
-            getCalendarContainer: getPopupContainer,
-            format: mergedFormat,
-            pickerClass,
-            pickerInputClass,
-            locale,
-            localeCode,
-            timePicker,
-          },
-          on: {
-            ...getListeners(this),
-            openChange: this.handleOpenChange,
-            focus: this.handleFocus,
-            blur: this.handleBlur,
-            mouseenter: this.handleMouseEnter,
-            mouseleave: this.handleMouseLeave,
-            change: this.handleChange,
-            ok: this.handleOk,
-            calendarChange: this.handleCalendarChange,
-          },
-          ref: 'picker',
-          scopedSlots: this.$scopedSlots || {},
+          ...props,
+          getCalendarContainer: getPopupContainer,
+          format: mergedFormat,
+          pickerClass,
+          pickerInputClass,
+          locale,
+          localeCode,
+          timePicker,
+          onOpenChange: this.handleOpenChange,
+          onFocus: this.handleFocus,
+          onBlur: this.handleBlur,
+          onMouseenter: this.handleMouseEnter,
+          onMouseleave: this.handleMouseLeave,
+          onChange: this.handleChange,
+          onOk: this.handleOk,
+          onCalendarChange: this.handleCalendarChange,
+          ref: this.savePicker,
         };
-        return (
-          <Picker {...pickerProps}>
-            {this.$slots &&
-              Object.keys(this.$slots).map(key => (
-                <template slot={key} key={key}>
-                  {this.$slots[key]}
-                </template>
-              ))}
-          </Picker>
-        );
+        return <Picker {...pickerProps} vSlots={this.$slots} />;
       },
     },
 
@@ -242,7 +226,7 @@ export default function wrapPicker(Picker, props, pickerType) {
         <LocaleReceiver
           componentName="DatePicker"
           defaultLocale={this.getDefaultLocale}
-          scopedSlots={{ default: this.renderPicker }}
+          children={this.renderPicker}
         />
       );
     },
diff --git a/components/vc-calendar/src/Calendar.jsx b/components/vc-calendar/src/Calendar.jsx
index 83fb1c100..bfda80e62 100644
--- a/components/vc-calendar/src/Calendar.jsx
+++ b/components/vc-calendar/src/Calendar.jsx
@@ -61,6 +61,8 @@ const Calendar = {
     focusablePanel: PropTypes.bool.def(true),
     inputMode: PropTypes.string,
     inputReadOnly: PropTypes.bool,
+    monthCellRender: PropTypes.func,
+    monthCellContentRender: PropTypes.func,
   },
 
   mixins: [BaseMixin, CommonMixin, CalendarMixin],
diff --git a/components/vc-calendar/src/Picker.jsx b/components/vc-calendar/src/Picker.jsx
index 9bd8f48e1..69be36689 100644
--- a/components/vc-calendar/src/Picker.jsx
+++ b/components/vc-calendar/src/Picker.jsx
@@ -52,6 +52,7 @@ const Picker = {
 
   data() {
     const props = this.$props;
+    this.calendarElement = null;
     this.saveCalendarRef = refFn.bind(this, 'calendarInstance');
     let open;
     if (hasProp(this, 'open')) {
diff --git a/components/vc-calendar/src/calendar/CalendarFooter.jsx b/components/vc-calendar/src/calendar/CalendarFooter.jsx
index 7e56a920c..abdb4a316 100644
--- a/components/vc-calendar/src/calendar/CalendarFooter.jsx
+++ b/components/vc-calendar/src/calendar/CalendarFooter.jsx
@@ -52,7 +52,7 @@ const CalendarFooter = {
       if (showToday) {
         nowEl = <TodayButton key="todayButton" {...btnProps} />;
       }
-      delete btnProps.props.value;
+      delete btnProps.value;
       let okBtn = null;
       if (showOk === true || (showOk !== false && !!timePicker)) {
         okBtn = <OkButton key="okButton" {...btnProps} />;
diff --git a/components/vc-calendar/src/date/DateInput.jsx b/components/vc-calendar/src/date/DateInput.jsx
index e6817ca28..90290d523 100644
--- a/components/vc-calendar/src/date/DateInput.jsx
+++ b/components/vc-calendar/src/date/DateInput.jsx
@@ -33,6 +33,8 @@ const DateInput = {
     clearIcon: PropTypes.any,
     inputMode: PropTypes.string,
     inputReadOnly: PropTypes.bool,
+    disabled: PropTypes.bool,
+    showClear: PropTypes.bool,
   },
 
   data() {
diff --git a/components/vc-calendar/src/month/MonthPanel.jsx b/components/vc-calendar/src/month/MonthPanel.jsx
index d2aab8e18..aeb5398d9 100644
--- a/components/vc-calendar/src/month/MonthPanel.jsx
+++ b/components/vc-calendar/src/month/MonthPanel.jsx
@@ -1,6 +1,6 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
-import { hasProp, getListeners } from '../../../_util/props-util';
+import { hasProp } from '../../../_util/props-util';
 import MonthTable from './MonthTable';
 
 function goYear(direction) {
@@ -86,7 +86,7 @@ const MonthPanel = {
             <a
               class={`${prefixCls}-year-select`}
               role="button"
-              onClick={getListeners(this).yearPanelShow || noop}
+              onClick={this.$attrs.onYearPanelShow || noop}
               title={locale.yearSelect}
             >
               <span class={`${prefixCls}-year-select-content`}>{year}</span>
diff --git a/examples/App.vue b/examples/App.vue
index cabc060e7..300c327f1 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/calendar/demo/basic';
+import demo from '../antdv-demo/docs/date-picker/demo/basic';
 
 export default {
   components: {
diff --git a/examples/index.js b/examples/index.js
index fb3fb7049..c2d39c4dc 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -35,6 +35,7 @@ import {
   Carousel,
   TimePicker,
   Calendar,
+  DatePicker,
   notification,
   message,
 } from 'ant-design-vue';
@@ -87,4 +88,5 @@ app
   .use(Carousel)
   .use(TimePicker)
   .use(Calendar)
+  .use(DatePicker)
   .mount('#app');