Vue实现点击时间获取时间段查询功能
程序员文章站
2023-11-04 08:19:04
本文实例为大家分享了vue按时间段查询的案例，效果图如下
html代码
本文实例为大家分享了vue按时间段查询的案例，效果图如下
html代码
<template>
<div class="personalreport_time">
<input type="date" :max="this.endtime" value="" v-model="starttime"/>
<div></div>
<input type="date" :min="starttime" :max="this.maxtime" v-model="endtime"/>
</div>
<ul class="personalreport_date">
<li @click="query('today')">今天</li>
<li @click="query('yesterday')">昨天</li>
<li @click="query('weeks')">本周</li>
<li @click="query('lastweek')">上周</li>
<li @click="query('month')">本月</li>
<li @click="query('lastmonth')">上月</li>
</ul>
<div>
<button @click="query" class="but">查询</button>
</div>
</template>
vue.js代码 点击事件
//获取时间、
//时间解析;
time:function(now) {
let year=new date(now).getfullyear();
let month=new date(now).getmonth()+1;
let date=new date(now).getdate();
if (month < 10) month = "0" + month;
if (date < 10) date = "0" + date;
return year+"-"+month+"-"+date
},
//本周第一天；
showweekfirstday:function()
{
let nowdate=new date();
let weekfirstday=new date(nowdate-(nowdate.getday()-1)*86400000);
let m=number(weekfirstday.getmonth())+1;
if(m<10){
m="0"+m;
}
let d=weekfirstday.getdate();
if(d<10){
d="0"+d;
}
return weekfirstday.getfullyear()+"-"+m+"-"+d;
},
//本周最后一天
showweeklastday:function ()
{
let nowdate=new date();
let weekfirstday=new date(nowdate-(nowdate.getday()-1)*86400000);
let weeklastday=new date((weekfirstday/1000+6*86400)*1000);
let m=number(weeklastday.getmonth())+1;
if(m<10){
m="0"+m;
}
let d=weeklastday.getdate();
if(d<10){
d="0"+d;
}
return weeklastday.getfullyear()+"-"+m+"-"+d;
},
//获得某月的天数：
getmonthdays:function (mymonth){
let monthstartdate = new date(new date().getfullyear(), mymonth, 1);
let monthenddate = new date(new date().getfullyear(), mymonth + 1, 1);
let days = (monthenddate - monthstartdate)/(1000 * 60 * 60 * 24);
return days;
},
//点击事件
query:function (way) {
let self=this;
this.$refs.pag.currentpage=1;
this.page=this.$refs.pag.currentpage;
switch (way){
case 'today':
this.starttime=this.maxtime;
this.endtime=this.maxtime;
break;
case 'yesterday':
this.starttime=this.time(new date().gettime()-24*60*60*1000);
this.endtime=this.time(new date().gettime()-24*60*60*1000);
break;
case 'weeks':
this.starttime=this.showweekfirstday();
this.endtime=this.maxtime;
break;
case 'lastweek':
this.starttime=this.time(new date(new date().getfullyear(), new date().getmonth(), new date().getdate()-new date().getday()-6));
this.endtime=this.time(new date(new date().getfullyear(), new date().getmonth(), new date().getdate()+(6-new date().getday()-6)));
break;
case 'month':
this.starttime=this.time(new date(new date().getfullyear(), new date().getmonth(),1));
this.endtime=this.maxtime;
break;
case 'lastmonth':
this.starttime=this.time(new date(new date().getfullyear(),new date().getmonth()-1,1));
this.endtime=this.time(new date(new date().getfullyear(),new date().getmonth()-1,this.getmonthdays(new date().getmonth()-1)));
break;
}
this.$axios({
method:'post',
url:'/inter/user/querymemberreport',
data:{
'account':this.account,
'baselotteryid':this.lottersid,
'starttime':this.starttime,
'endtime':this.endtime
}
}).then(function (data) {
// console.log(data)
}).catch(function (error) {
console.log(error);
})
}
这样一个点击查询时间段效果就可以实现了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： 网站外链建设与文章发布规范