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