1.引入css, js

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.element-ui官网拉取组件使用

<div id="app">
 <!--日期组件-->
   <div style="margin-left: 20px"  class="block">
              <span class="demonstration">开始日期</span>
               <el-date-picker
             v-model="value1"
               type="date"
               placeholder="选择日期">
               </el-date-picker>
             </div>
             <div  style="margin: 18px 23px"  class="block">
              <span class="demonstration">结束日期</span>
               <el-date-picker
               v-model="value2"
               type="date"
               placeholder="选择日期">
               </el-date-picker>
             </div>
  </div>

3.初始Vue对象及属性

<script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false,
         pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '' 
        }
      }
    })
  </script>

4.效果