首页 > 编程 > JavaScript > 正文

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

2019-11-19 13:56:31
字体:
来源:转载
供稿:网友

本文实例为大家分享了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);   })  }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表