<div id="app">
  <el-date-picker v-model="date" value-format="yyyy-MM-dd" ></el-date-picker>
  <my-picker v-model="date" value-format="yyyy-MM-dd" @change="onChange" ></my-picker>
  <p>Date is {{ date }}</p>
  
  <my-card shadow="hover" style="width: 200px">
    Hello Vue
  </my-card>
</div>
Vue.component('my-picker', {
  template: '<el-date-picker v-bind="$attrs" v-on="$listeners" />'
})

Vue.component('my-card', {
  render: function(h) {
    return h('el-card', {
      attrs: this.$attrs,
      on: this.$listeners,
      props: this.$props
    }, this.$slots.default)
  }
})

new Vue({
  el: '#app',
  data: {
    date: "2019-08-20"
  },
  methods: {
    onChange: function(v) {
      console.log(v)
    }
  }
})

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.12.0/theme-chalk/index.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js
  2. https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.12.0/index.js