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: [],
}
}
},
原文地址:https://www.cnblogs.com/zwh0910/p/13938989.html