Vue实现点击时间获取时间段查询功能

网友投稿 452 2023-02-07


Vue实现点击时间获取时间段查询功能

本文实例为大家分享了vue按时间段查询的案例,效果图如下

html代码

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="0maTQGBfMQL"+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 DmaTQGBfMQLate().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);

})

}

这样一个点击查询时间段效果就可以实现了。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:SpringMVC整合SpringSession 实现sessiong
下一篇:vue组件实现弹出框点击显示隐藏效果
相关文章

 发表评论

暂时没有评论,来抢沙发吧~