当前位置:首页 > 电脑知识 > 正文内容

干货分享(vue中获取当前时间)vue时间戳,Vue如何实现点击时间获取时间段查询功能,Vue如何实现点击时间获取时间段查询功能,

sauo3年前 (2022-12-15)电脑知识165

Vue如何实现点击时间获取时间段查询功能废话不多说,直接上代码。

html:

<template><divclass="personalReport_time"><inputtype="date":max="this.endTime"value=""v-model="startTime"/><div></div><inputtype="date":min="startTime":max="this.maxTime"v-model="endTime"/></div><ulclass="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=newDate(now).getFullYear();let month=newDate(now).getMonth()+1;let date=newDate(now).getDate();if(month <10) month ="0"+ month;if(date <10) date ="0"+ date;return year+"-"+month+"-"+date },//本周第一天; showWeekFirstDay:function(){letNowdate=newDate();letWeekFirstDay=newDate(Nowdate-(Nowdate.getDay()-1)*86400000);letM=Number(WeekFirstDay.getMonth())+1;if(M<10){M="0"+M;}letD=WeekFirstDay.getDate();if(D<10){D="0"+D;}returnWeekFirstDay.getFullYear()+"-"+M+"-"+D;},//本周最后一天 showWeekLastDay:function(){letNowdate=newDate();letWeekFirstDay=newDate(Nowdate-(Nowdate.getDay()-1)*86400000);letWeekLastDay=newDate((WeekFirstDay/1000+6*86400)*1000);letM=Number(WeekLastDay.getMonth())+1;if(M<10){M="0"+M;}letD=WeekLastDay.getDate();if(D<10){D="0"+D;}returnWeekLastDay.getFullYear()+"-"+M+"-"+D;},//获得某月的天数: getMonthDays:function(myMonth){let monthStartDate =newDate(newDate().getFullYear(), myMonth,1);let monthEndDate =newDate(newDate().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){casetoday:this.startTime=this.maxTime;this.endTime=this.maxTime;break;caseyesterday:this.startTime=this.Time(newDate().getTime()-24*60*60*1000);this.endTime=this.Time(newDate().getTime()-24*60*60*1000);break;caseweeks:this.startTime=this.showWeekFirstDay();this.endTime=this.maxTime;break;caselastWeek:this.startTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth(),newDate().getDate()-newDate().getDay()-6));this.endTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth(),newDate().getDate()+(6-newDate().getDay()-6)));break;casemonth:this.startTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth(),1));this.endTime=this.maxTime;break;caselastMonth:this.startTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth()-1,1));this.endTime=this.Time(newDate(newDate().getFullYear(),newDate().getMonth()-1,this.getMonthDays(newDate().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);})}

这样一个点击查询时间段效果就可以实现了。希望能够帮助到大家。

(window.slotbydup = window.slotbydup || []).push({ id: "u6835052", container: "_96bek913mdb", async: true });

本文链接:http://blog.sauo.top/?id=523 感谢分享!

分享到:

扫描二维码推送至手机访问。

版权声明:本文由冬眠先生个人博客发布,如需转载请注明出处。

本文链接:http://blog.sauo.top/?id=523

分享给朋友:

“干货分享(vue中获取当前时间)vue时间戳,Vue如何实现点击时间获取时间段查询功能,Vue如何实现点击时间获取时间段查询功能,” 的相关文章

硬核推荐(ubuntu取消自动休眠)ubuntu关闭自动休眠命令,ubuntu 关闭自动休眠模式的方法,ubuntu 关闭自动休眠模式的方法,

硬核推荐(ubuntu取消自动休眠)ubuntu关闭自动休眠命令,ubuntu 关闭自动休眠模式的方法,ubuntu 关闭自动休眠模式的方法,

免费领取腾讯云服务器! 在使用ssh连接ubuntu系统时,发现长时间不输入ssh命令ssh就会自动断开。查找了一下原因,发现是安装ubuntu的电脑自动进入了休眠模式,而ubuntu系统中有多种关闭自动休眠的方法,下面就来说一说使用ssh命令来关闭ubu...

这都可以(PHP百度百科)pHp是什么,php中关于strtotime函数31日取前几个月日期的BUG,php中关于strtotime函数31日取前几个月日期的BUG,

免费领取腾讯云服务器! 在使用php脚本中的 strtotime 函数取前几个月的日期时,发现每到31日时,取出的前几个月的日期都会出现错误。仔细检查了一下,发现在利用 strtotime 函数取前几个月的日期时,给 strtotime 函数的参数并不规范...

这都可以?(常用正则表达式大全)常用正则表达式大全图片,常用正则表达式大全,常用正则表达式大全,

免费领取腾讯云服务器! 网上收集了一些常用的正则表达式,基本上都全,需要的可以拿去了。 关于号码的正则表达式 QQ号正则表达式 BASIC /^[1-9][0-9]{...

难以置信(php错误日志在哪里)PHP 日志,php设置错误日志的方法,php设置错误日志的方法,

难以置信(php错误日志在哪里)PHP 日志,php设置错误日志的方法,php设置错误日志的方法,

免费领取腾讯云服务器! php设置错误日志需要在php配置文件php.ini中设置,只需要简单的几步设置就可以实现,下面就来详细的说一下。 php设置错误日志的方法 1、打开php的配置文件,php.ini...

全程干货(php将图片转为对象)php文件怎么转成图片,php将图片转为base64编码格式图片的方法,php将图片转为base64编码格式图片的方法,

免费领取腾讯云服务器! 下面的博文提供两个利用php代码将图片转为base64编码格式图片的方法,分为php转换本地图片为base64图片以及php转换远程图片为base64图片的方法。...

学会了吗(php保存文件到指定地点)php保存图片,php保存base64编码图片的方法,php保存base64编码图片的方法,

免费领取腾讯云服务器! 写一个图片上传的插件,因为特殊性就在前台将图片转为base64编码并上传到后台,下面说一说在后台怎么利用php代码将base64编码格式的图片转成正常的图片,并保存的。 PHP保存Base64图片 p...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。