二话不说,先上图

实现如上代码:

           //获取本周第一天
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;
},
// 自动回填日期
autoTime(type) {
this.active_time_type = type;
switch (type) {
case 1:
              //今日
var temp_start_create_time = new Date().Format("yyyy-MM-dd");
var temp_end_create_time = new Date().Format("yyyy-MM-dd");
break;
case 2:
              //本周
var temp_start_create_time = this.showWeekFirstDay()
var temp_end_create_time = new Date().Format("yyyy-MM-dd");
break;
case 3:
              //本月
var temp_start_create_time = util.getCurrentMonthFirst();
var temp_end_create_time = util.getCurrentMonthLast();
break;
default:
break;
}
this.value1 = []//element-ui 使用的日期控件定义的v-model值
this.value1.push(temp_start_create_time, temp_end_create_time)
this.start_create_time = this.value1[0];
this.end_create_time = this.value1[1]; }
}

Vue实现点击时间获取时间段查询功能的更多相关文章

  1. C#根据当前时间获取周,月,季度,年度等时间段的起止时间

    最近有个统计分布的需求,需要按统计本周,上周,本月,上月,本季度,上季度,本年度,上年度等时间统计分布趋势,所以这里就涉及到计算周,月,季度,年度等的起止时间了,下面总结一下C#中关于根据当前时间获取 ...

  2. Calendar时间获取天,周,月,季度,年度时间段

    Date类 Date类的大多数构造函数和方法都已经抛弃,只留下和毫秒有关的操作,目前常用的构造函数 常用方法 设置毫秒数 读取毫秒数 toString()打印结果 //创建日期对象,把当前的毫秒值转成 ...

  3. vue 的点击事件怎么获取当前点击的元素

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元   首先 vue的点击事件 是用 @cl ...

  4. bootstrap-table前端实现多条件时间段查询数据

    实现思路:通过正则匹配到字段是否符合条件,时间段转换为时间戳比对. 这是大体的效果图: 页面的html代码 <div class="content-head mgb10"&g ...

  5. jeecg 扩展封装查询条件 时间段查询

    使用jeecg框架开发的小伙伴们知道,添加查询条件,通常是我们加一个配置(query="true")就可以将该字段设置为查询条件.简单方便.但是这样的配置查询条件仅适用于输入框输入 ...

  6. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

  7. day80:luffy:短信sdk接入&点击获取验证码&注册功能的实现&Celery实现短信发送功能

    目录 1.短信sdk接入 2.前端点击获取验证码效果 3.注册后端接口实现 4.注册-前端 5.Celery 6.Celery完成短信发送功能 1.短信sdk接入 1.准备工作 1.下载云通讯相关的文 ...

  8. 基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理

    在做一些常规应用的时候,我们往往需要确定条件的内容,以便在后台进行区分的进行精确查询,在移动端,由于受限于屏幕界面的情况,一般会对多个指定的条件进行模糊的搜索,而这个搜索的处理,也是和前者强类型的条件 ...

  9. 【RL-TCPnet网络教程】第30章 RL-TCPnet之SNTP网络时间获取

    第30章      RL-TCPnet之SNTP网络时间获取 本章节为大家讲解RL-TCPnet的SNTP应用,学习本章节前,务必要优先学习第29章的NTP基础知识.有了这些基础知识之后,再搞本章节会 ...

随机推荐

  1. 简易MySQL存储过程

    自从那天灵感突现,搜了下MySQL存储过程的实现,我就再也不会为造测试数据这种事情烦恼了,存储过程用起来简直太方便了. DROP PROCEDURE IF EXISTS insert2pay; DEL ...

  2. HTML 获取class里的多个值 和 dataset的使用

    属性:classList var x = event.target; console.log(x); console.log(x.classList); 可以发现 获取了全部的class里的值 获取单 ...

  3. PHP swoole websocket协议上机指南

    这一上机实验的开发环境用的是jetbrain公司的phpstorm 上级步骤如下: 创建websocket服务端 <?php $server = ); function onopen($serv ...

  4. Python之PyLint自动检查代码

    PyLint的下载地址:https://pypi.python.org/pypi/pylint PyLint的官网:http://www.pylint.org/ 从源码发行版安装,解压文件包并且运行 ...

  5. @Valid与@Validated

    Spring Validation验证框架对参数的验证机制提供了@Validated(Spring's JSR-303规范,是标准JSR-303的一个变种),javax提供了@Valid(标准JSR- ...

  6. 题解 【SCOI2015】小凸玩矩阵

    题面 解析 这题其实也是网络流建图.. 首先,转换下思路, 求第k大的数的最小值, 其实就是求一个最小的值, 使选取的点中能有(n-k+1)个的值比它小. 因此,可以采用二分答案, 每次判断一个值, ...

  7. Linux系统挂载存储只读改成读写

    Copy from:https://blog.csdn.net/u010977122/article/details/53316671 1.mount:用于查看哪个模块输入只读,一般显示为:[root ...

  8. Confluence 6.15 博客页面(Blog Posts)宏

    博客页面宏允许你 Confluence 页面中显示博客页面.通过单击博客的标题将会把你链接到博客页面中. 使用博客页面宏 为了将博客页面宏添加到页面中:  从编辑工具栏中,选择 插入(Insert)  ...

  9. centos 7 php7 yum源

    rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm rpm -Uvh https://mir ...

  10. Python - 工具:将大图切片成小图,将小图组合成大图

    训练keras时遇到了一个问题,就是内存不足,将 .fit 改成 .fit_generator以后还是放不下一张图(我的图片是8192×8192的大图==64M).于是解决方法是将大图切成小图,把小图 ...