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 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
Javascript之Date对象详解
Jun 07 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
学习Vue组件实例
Apr 28 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
PHP 递归效率分析
2009/11/24 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
PHP中“=&gt;
2019/03/01 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
关于js datetime的那点事
2011/11/15 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
js实现京东秒杀倒计时功能
2019/01/21 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
Python与Redis的连接教程
2015/04/22 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
python数据抓取3种方法总结
2021/02/07 Python
餐饮业会计岗位职责
2013/12/19 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
创业融资计划书
2014/04/25 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis