Layui时间范围选择器,添加【本周、本月、本季度、本年等常用时间快捷键】

news2025/1/9 17:09:48

文章目录

    • 1. 界面实现
    • 2. JS具体实现
      • 2.1 第一种实现
      • 2.2 第二种实现

1. 界面实现

 <input id="Date_select" type="text" class="form-control" placeholder="请选择时间范围" style="border-radius: 4px;" />
 <input id="StartDate" type="hidden" />
 <input id="EndDate" type="hidden" />

2. JS具体实现

2.1 第一种实现

//时间选择
layui.laydate.render({
	elem: '#Date_select',
    type: 'date',
	range: true,
	shortcuts: [
		{
			text: '本周',
			value: function () {
				let now = new Date(); //当前日期 
				let nowDayOfWeek = now.getDay() - 1; //今天本周的第几天,周日为0,但实际上平时都是以周一为一周的开始,所以周3因该为2
				let nowDay = now.getDate(); //当前日 
				let nowMonth = now.getMonth(); //当前月 
				let nowYear = now.getFullYear(); //当前年 
				let startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
				let endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek);
				var value = [];
				value.push(startTime);
				value.push(endTime);
				return value;
			}()
		},
		{
			text: "本月",
			value: function () {
				let now = new Date(); //当前日期 
				let nowMonth = now.getMonth(); //当前月 
				let nowYear = now.getFullYear(); //当前年 
				let startTime = new Date(nowYear, nowMonth, 1);
				let endTime = new Date(nowYear, nowMonth + 1, 0);
				var value = [];
				value.push(startTime);
				value.push(endTime);
				return value;
			}()
		},
		{
			text: "本季度",
			value: function () {
				let now = new Date(); //当前日期 
				let nowMonth = now.getMonth(); //当前月 
				let nowYear = now.getFullYear(); //当前年 
				let jd = Math.ceil((nowMonth + 1) / 3);
				let startTime = new Date(nowYear, (jd - 1) * 3, 1);
				let endTime = new Date(nowYear, jd * 3, 0);
				var value = [];
				value.push(startTime);
				value.push(endTime);
				return value;
			}()
		},
		{
			text: "本年",
			value: function () {
				let now = new Date(); //当前日期 
				let nowYear = now.getFullYear(); //当前年 
				let startTime = new Date(nowYear, 0, 1);
				let endTime = new Date(nowYear, 11, 31);
				var value = [];
				value.push(startTime);
				value.push(endTime);
				return value;
			}()
		},
	],
	done: function (value, date, endDate) {//选择后事件
		var StartDate = null;
		var EndDate = null;
		if (!!value) {
			StartDate = `${date.year}-${date.month}-${date.date} 00:00:00`;
			EndDate = `${endDate.year}-${endDate.month}-${endDate.date} 23:59:59`;
		}
		$("#StartDate").val(StartDate);
		$("#EndDate").val(EndDate);
	}
});

在这里插入图片描述

2.2 第二种实现

//时间选择
layui.laydate.render({
    elem: '#Date_select',
    type: 'date',
    range: true,
    shortcuts: [
    	{
			text: '前三天',
			value: function () { return dateRange("前三天"); }()
		},
        {
            text: '昨天',
            value: function () { return dateRange("昨天"); }()
        },
        {
            text: '今天',
            value: function () { return dateRange("今天"); }()
        },
        {
            text: '上周',
            value: function () { return dateRange("上周"); }()
        },
        {
            text: '本周',
            value: function () { return dateRange("本周"); }()
        },
        {
            text: "上月",
            value: function () { return dateRange("上月"); }()
        },
        {
            text: "本月",
            value: function () { return dateRange("本月"); }()
        },
        {
            text: "上季度",
            value: function () { return dateRange("上季度"); }()
        },
        {
            text: "本季度",
            value: function () { return dateRange("本季度"); }()
        },
        {
            text: "上年",
            value: function () { return dateRange("上年"); }()
        },
        {
            text: "本年",
            value: function () { return dateRange("本年"); }()
        },
    ],
    done: function (value, date, endDate) {
        var StartDate = null;
        var EndDate = null;
        if (!!value) {
            StartDate = `${date.year}-${date.month}-${date.date} 00:00:00`;
            EndDate = `${endDate.year}-${endDate.month}-${endDate.date} 23:59:59`;
        }
        $("#StartDate").val(StartDate);
        $("#EndDate").val(EndDate);
    }
});
//日期范围选择快捷键获取数据
function dateRange(val) {
    let value = [];
    let startTime, endTime;
    let now = new Date(); //当前日期 
    let nowDayOfWeek = now.getDay() - 1; //今天本周的第几天,周日为0,但实际上平时都是以周一为一周的开始,所以周3因该为2
    let nowDay = now.getDate(); //当前日 
    let nowMonth = now.getMonth(); //当前月 
    let nowYear = now.getFullYear(); //当前年 
    let jd = Math.ceil((nowMonth + 1) / 3)
    switch (val) {
        case "前三天":
			startTime = new Date(nowYear, nowMonth, nowDay - 3);
			endTime = new Date(nowYear, nowMonth, nowDay);
			break;
        case "昨天":
            startTime = new Date(nowYear, nowMonth, nowDay - 1);
            endTime = new Date(nowYear, nowMonth, nowDay);
            break;
        case "今天":
            startTime = new Date(nowYear, nowMonth, nowDay);
            endTime = new Date(nowYear, nowMonth, nowDay);
            break;
        case "明天":
            startTime = new Date(nowYear, nowMonth, nowDay + 1);
            endTime = new Date(nowYear, nowMonth, nowDay + 1);
            break;
        case "上周":
            debugger
            startTime = new Date(nowYear, nowMonth, (nowDay - nowDayOfWeek) - 7);
            endTime = new Date(nowYear, nowMonth, (nowDay + 6 - nowDayOfWeek) - 7);
            break;
        case "本周":
            startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
            endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek);
            break;
        case "上月":
            startTime = new Date(nowYear, nowMonth - 1, 1);
            endTime = new Date(nowYear, nowMonth, 0);
            break;
        case "本月":
            startTime = new Date(nowYear, nowMonth, 1);
            endTime = new Date(nowYear, nowMonth + 1, 0);
            break;
        case "上季度":
            startTime = new Date(nowYear, ((jd - 1) - 1) * 3, 1);
            endTime = new Date(nowYear, (jd - 1) * 3, 0);
            break
        case "本季度":
            startTime = new Date(nowYear, (jd - 1) * 3, 1);
            endTime = new Date(nowYear, jd * 3, 0);
            break
        case "上年":
            startTime = new Date(nowYear - 1, 0, 1);
            endTime = new Date(nowYear - 1, 11, 31);
            break
        case "本年":
            startTime = new Date(nowYear, 0, 1);
            endTime = new Date(nowYear, 11, 31);
            break
    }
    value.push(startTime);
    value.push(endTime);
    return value;
};

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/701677.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RuoYi-Vue Swagger 上传文件接口

前言 RuoYi-Vue&#xff1a; v3.8.5swagger 1.6.2 &#xff08;https://github.com/swagger-api/swagger-core, https://gitee.com/mirrors/swagger-core&#xff09; Swagger 上传接口定义 ApiOperation(value "图片上传") PostMapping(value "/upload&qu…

SpringBoo集成MongoDB

一、集成简介 spring-data-mongodb提供了MongoTemplate与MongoRepository两种方式访问mongodb&#xff0c;MongoRepository操作简单&#xff0c;MongoTemplate操作灵活&#xff0c;我们在项目中可以灵活适用这两种方式操作mongodb&#xff0c;MongoRepository的缺点是不够灵活…

OpenMMLab-AI实战营第二期——相关3. RGB语义分割标注图像转为Gray格式的mask

文章目录 1. 转换代码1.1 查看原始图像1.2 转换1.3 cv::IMREAD_GRAYSCALE与CV_BGR2GRAY结果不一致1.3.1 现象描述1.3.2 原因1.3.3 推荐做法 1.4 CV_BGR2GRAY和CV_RGB2GRAY不一致 2. macOS上查看mask&#xff08;使用默认的预览&#xff09; 1. 转换代码 找到了一个语义分割的数…

rc表格卡方检验

一、案例介绍 某医院用三种穴位针刺治疗急性腰扭伤&#xff0c;现在想比较三种穴位针刺效果有无差别&#xff0c;结果汇总如下表&#xff1a; 二、问题分析 本案例想比较三种穴位针刺效果有无差别&#xff0c;可以使用RxC卡方检验进行分析。 通常情况下&#xff0c;共有三种…

uniapp项目 封装一个饼图组件 并且修改显示项的排列方式

需求如下: 真实数据渲染后的完成效果如下: 记录一下代码: <template><view><view style"height: 600rpx;"><l-echart ref"chart" finished"init"></l-echart></view></view> </template><…

【面试】一文知晓---拦截器和过滤器的区别

目录 背景关系图 拦截器和过滤器的区别实操1.过滤器1.1HttpServletRequestWrapper1.2 OncePerRequestFilter1.3 配置 2.拦截器2.1登录拦截2.2配置 3.监听器 三、注意1.静态资源问题2.登录拦截ajax重定向 总结 背景 关系图 然后具体执行流程如下&#xff1a; 拦截器和过滤器的区…

IDEA创建一个Servlet项目(tomcat10)

一、创建maven项目 org.apache.maven.archetypes:maven-archetype-webapp 二、增加Servlet依赖 tomcat9及以前依赖 <!--加入servlet依赖&#xff08;servlet的jar&#xff09;--><dependency><groupId>javax.servlet</groupId><artifactId>ja…

MoblieNet

论文信息 论文名称&#xff1a;MobileNets: Efficient Convolutional Neural Networks for Mobile Vision Applications 论文地址&#xff1a;https://arxiv.org/abs/1704.04861 研究背景和研究意义 之前的网络都倾向于将网络做得又大又深&#xff0c;并且不考虑网络的速度&…

测试CefSharp.WinForms的基本用法

微信公众号“dotNET全栈开发”的文章《C#使用CefSharp内嵌网页-并给出C#与JS的交互示例》介绍了CefSharp的基本用法。CefSharp支持在.net程序中内置Chromium&#xff0c;它是Chromium Embedded Framework (CEF) 的轻量化封装。   CefSharp面向Winform、wpf等提供对应的NuGet包…

SpringBoot初始化接口CommandLineRunner

CommandLineRunner的使用 接口定义使用执行顺序使用 Order 注解实现Orderd接口排序总结 接口定义 Spring官方给出的接口定义 package org.springframework.boot;FunctionalInterface public interface CommandLineRunner {void run(String... args) throws Exception; }在 Sp…

卡方检验之多重比较

一、案例介绍 某医师研究物理疗法、药物治疗和外用膏药3种疗法治疗周围性面神经麻痹的疗效&#xff0c;通过整体卡方检验已经得知3种疗法有效率的差异有统计学意义&#xff08;χ221.0377&#xff0c;p0.000&#xff09;的结论。现在想进一步知道&#xff0c;具体是哪两种疗法…

Android后台应用开启前台服务---android8到android12梳理

1、Android 8.0 异常报错 在Android 8.0 系统中&#xff0c;处于后台的应用想要开启前台服务&#xff0c;必须满足两点&#xff1a; 在Activity中调用startForegroundService()方法所调起的Service必须执行startForeground(int id, Notification notification)方法&#xff0…

计算几何——gitf-wrapping算法

几何中的"gift-wrapping"算法&#xff0c;又称为"Jarvis算法"&#xff0c;是一种用于计算凸包(convex hull)的方法。下面我将为你解释一下该算法的步骤&#xff1a; 1. 找到具有最小x坐标的点P&#xff0c;我们将其作为凸包的起点。 2. 将P标记为当前点&a…

doker安装RabbitMQ以及用java连接

目录 doker安装&#xff1a; RabitMq安装&#xff1a; java链接 doker安装&#xff1a; 参考链接&#xff08;非常详细&#xff09;&#xff1a; docker安装以及部署_docker bu shuminio_春风与麋鹿的博客-CSDN博客 安装好后开启doker //启动docker服务 systemctl start do…

PromQL讲解与实战操作

PromQL讲解与实战操作 一、PromQL 介绍 PromQL&#xff08;Prometheus Query Language&#xff09;是 Prometheus 内置的数据查询语言&#xff0c;它能实现对事件序列数据的查 询、聚合、逻辑运算等。它并且被广泛应用在 Prometheus 的日常应用当中&#xff0c;包括对数据查询…

在Linux服务器上简单部署一个Python项目

一、在对应的服务器上检查有无Python环境 大部分Linux系统都是自带了Python环境的&#xff0c;查看是否具备Python的运行环境&#xff0c;可以通过命令Python --version 或者 Python3 --version 查看。如果你的项目需要Python3的环境&#xff0c;而系统又没有&#xff0c;则需要…

Linux 开启 swap 分区详细教程

故事背景&#xff1a; 哥们云机器内存资源不足&#xff0c;搞个 kafka eagle 监控&#xff0c;刚跑起来就卡死了&#xff0c;就很无语&#xff0c;哥们忙活&#xff0c;算了直接开搞&#xff0c;内存不够&#xff0c;硬盘来凑&#xff0c;拿着硬盘去做swap分区&#xff0c;也能…

JavaEE-SpringMVC-云借阅图书管理系统(包含源码、数据库sql文件、报告)

文章目录 前言云借阅系统功能结构图云借阅系统结构层次云借阅系统项目文件组织结构开发环境具体操作1. Maven仓库修改2. MySQL数据库配置文件3. Tomcat运行截图 总结 前言 参考借鉴黑马程序员书籍&#xff1b;和老师上课讲解的代码和PPT。核心代码由自己编写完成&#xff0c;核…

【夜深人静学数据结构与算法】回溯算法

目录 前言&#xff1a; 回溯算法&#xff1a; 回溯法的常见应用: 回溯法的模板: 回溯法的图解&#xff1a;​ 案例&#xff1a; 77. 组合 - 力扣&#xff08;LeetCode&#xff09; 总结&#xff1a; 前言&#xff1a; 回溯算法是一个比较抽象的算法&#xff0c;因此我们…

JavaScript中的面向对象

面向对象编程是一种编程范式。 面向对象。何为对象&#xff1f; 复习一下&#xff1a; JavaScript中的数据类型分为&#xff1a; 原始类型&#xff1a;数值型&#xff0c;字符串型&#xff0c;布尔型、ES6新增的symbol 特殊类型&#xff1a;undefined型&#xff0c;null型 组合…