DatePicker日期选择器的使用

效果展示：

 

 代码如下：

<el-date-picker v-model="listQuery.times" type="daterange" range-separator="-" start-placeholder="开始日期" unlink-panels
    end-placeholder="结束日期" value-format="yyyy-MM-dd">
</el-date-picker>

代码解释：

1、type:显示类型。值有year/month/date/dates/week/datetime/datetimerange/daterange/monthrange。type="date"表示选择日，type="week"表示选择周，type="month"表示选择月，type="year"表示选择年，type="dates"表示选择多个日期，type="daterange"表示日期范围，type="monthrange"表示月份范围，

2、value-format：指定绑定值的格式。不指定则绑定值为 Date 对象。

3、unlink-panels：在范围选择器里取消两个日期面板之间的联动

由于日期范围涉及两个值，所以绑定一个数组；

data() {
    return {
        listQuery: {
            date: [],
        }
    }
},

 el-date-picker的size属性的值有mini和small，默认为small