vue+elementUI 时间范围选择器
1、引入组件
<div> <el-date-picker type="date" placeholder="选择开始日期" :picker-options="pickerOptionsStart" v-model="startTime" @change="startTimeChang"></el-date-picker> <el-date-picker type="date" placeholder="选择结束日期" :picker-options="pickerOptionsOver" v-model="endTime" @change="endTimeChang"></el-date-picker> <el-button style="margin-left: 10px;" plain size="mini" @click="theWeek">最近一周</el-button> <el-button style="margin-left: 10px;" type="primary" @click="searchTime" icon="el-icon-search">查询</el-button </div>
2、js 定义
data() { return { startTime: ‘’, endTime: ‘’, pickerOptionsStart: { disabledDate (time) { return time.getTime() < 1488297600000 || time.getTime() >= Date.now(); } }, pickerOptionsOver: { disabledDate (time) { return time.getTime() < 1488297600000 || time.getTime() >= Date.now(); } } }; }
初始化定义:(最近一周)
startTime: this.dateFilter(new Date() - 3600 * 1000 * 24 * 7),
endTime: this.dateFilter(new Date()),
3、时间格式化方法,@change的方式取值
dateFilter:function (input) { var d = new Date(input); var year = d.getFullYear(); var month = d.getMonth() <9 ? '0' + (d.getMonth() + 1) : '' + (d.getMonth() + 1); var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate(); // var hour = d.getHours(); // var minutes = d.getMinutes(); // var seconds = d.getSeconds(); return year+ '-' + month + '-' + day; }, startTimeChang (val) { let startTime = this.dateFilter(val); this.startTime = startTime; }, endTimeChang (val) { let endTime = this.dateFilter(val); this.endTime = endTime; },
4、查询
async searchTime() { let param = { userId: this.$store.state.userInfo.userId, startTime: this.startTime, endTime: this.endTime }; try { const reportData = await getTeamReportList(param); if (reportData.result) { console.log(reportData); this.reportList = reportData.data; } else { throw new Error(reportData.msg); } } catch (err) { this.$message.error(err.message); console.log('获取数据失败', err); } } }
5、最近一周查询
async theWeek() { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); this.startTime = this.dateFilter(start); this.endTime = this.dateFilter(end); this.searchTime(); },
this.dateFilter(start):时间格式化
-
-
-
-
-
附:时间段组件设置默认时间段 (最近一小时)
html:
<el-date-picker v-model="valueTime" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" size="mini"> </el-date-picker>
js:
data() { return { valueTime: [new Date().getTime(), new Date().getTime() + ((1 * 60 * 60 * 1000) - 1)], } }