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


Posted in Javascript onAugust 21, 2020

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

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);
  })
 }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
javascript内存管理详细解析
Nov 11 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 #Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 #Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 #Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 #Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 #Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 #Javascript
React Native日期时间选择组件的示例代码
Apr 27 #Javascript
You might like
PHP 微信支付类 demo
2015/11/30 PHP
php图片添加水印例子
2016/07/20 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
python通过smpt发送邮件的方法
2015/04/30 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
Python实现购物车购物小程序
2018/04/18 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python2 对excel表格操作完整示例
2020/02/23 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
医院科室评语
2015/01/04 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
名人传读书笔记
2015/06/26 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
cypress测试本地web应用
2022/06/01 Javascript