首先在vue组件中
<template>
<div>
<el-date-picker
v-model = "timeList"
type = "daterange"
range-separator = "至"
start-placeholder = "开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</div>
</template>
<script>
export dafault {
data(){
return {
timeList:[],//储藏两个日期
//开始日期的数据
startTime:'',
year:'',
month:'',
day:'',
//结束日期的数据
endTime:'',
newYear:'',
newMonth:'',
newDay:'',
}
},
// 注意在mounted中定义这些 时间对象
mounted(){
const newDate = new Date()
this.newYear= newDate.getFullYear() + ''
this.newMonth= newDate.parseFloat(newDate.getMonth()) + 1
this.newDay= newDate.getDate() + ''
// 默认页面一刷新的时间段为当前时间前一周 至 当前时间
const date = new Date(newDate.getTime() - 7 * 24 * 3600 * 1000)
this.year = date.getFullYear() + ''
this.month = date.parseFloat(newDate.getMonth()) + 1
this.day = date.newDate.getDate() + ''
//拼接
this.startTime = this.year + '-' + this.month + '-' + this.day // 开始时间
this.endTime = this.newYear + '-' + this.newMonth + '-' +this.newDay // 结束时间
this.timeList = [this.startTime, this.endTime]
}
}
</script>
这样就可以以字符串形式传参啦~~~