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

news2024/9/28 9:22:39

界面

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

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、第二种实现

//时间选择
layui.laydate.render({
    elem: '#Date_select',
    type: 'date',
    range: true,
    shortcuts: [
        {
            text: '本周',
            value: function () {
                return page.dateRange("本周");
            }()
        },
        {
            text: "本月",
            value: function () {
                return page.dateRange("本月");
            }()
        },
        {
            text: "本季度",
            value: function () {
                return page.dateRange("本季度");
            }()
        },
        {
            text: "本年",
            value: function () {
                return page.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 - nowDayOfWeek)
			endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek)
			break;
		case "本月":
			startTime = new Date(nowYear, nowMonth, 1)
			endTime = new Date(nowYear, nowMonth + 1, 0)
			break;
		case "本季度":
			startTime = new Date(nowYear, (jd - 1) * 3, 1)
			endTime = new Date(nowYear, jd * 3, 0)
			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/695596.html

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

相关文章

Qt动态多级导航菜单(三)

前文链接&#xff1a;Qt动态多级导航菜单&#xff08;二&#xff09; 本次更新&#xff0c;主要将原导航项NavItem抽象为基类NavItemBase, 并派生出带有图标样式的动态多级导航菜单。至此&#xff0c;关于想要增加自定义的导航菜单样式&#xff0c;只需要从NavItemBase类派生即…

【Windows系统优化篇】谨慎开启“来自微软输入法的启用建议“功能

【Windows系统优化篇】谨慎开启"来自微软输入法的启用建议"功能 出于个人隐私数据的保护&#xff0c;不建议开启这玩意&#xff0c;容易造成个人隐私数据泄露。—【蘇小沐】 1.实验环境 系统版本Windows 11 专业工作站版22H2&#xff08;22621.1928&#xff09;&a…

为什么扩散模型能如此迅速地取代 GAN?看完这篇文章你就懂了

在人工智能领域&#xff0c;文本生成和图像生成一直是备受关注的领域。GAN (Generative Adversarial Networks) 技术作为当前最流行的生成模型之一&#xff0c;在这个领域内占据了重要地位。但是&#xff0c;随着技术的不断发展和应用&#xff0c;它的局限性也逐渐显露出来。而…

【Window doc命令与批处理文件】

Window doc命令与批处理文件 doc命令 快速生成一个内容为空(里面是空格)&#xff0c;大小不为空的文件 fsutil file createnew d:\workspace\haha.ini 1024window doc修改关联命令 assoc .txtexecfile assoc .txttxtfilewindow 关机命令 shutdown -s -t 100 # 100s后关机…

你以为很炸裂的建筑和真正炸裂的建筑

你以为很炸裂的那个建筑&#xff0c;可能是最近刷爆朋友圈&#xff0c;惊呆所有人的小教堂吧&#xff1a;“Reading between the lines”&#xff0c;一座由比利时年轻建筑师组合Gijs Van Vaerenbergh于2011年设计的大型公共艺术装置。很多人觉得这是全世界在视觉上最独特的“透…

【Python爬虫开发实战①】使用urllib以及XPath爬取可爱小猫图片

个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; 专栏&#xff1a;python网络爬虫从基础到实战 欢迎订阅&#xff01;后面的内容会越来越有意思~ 往期推荐&#xff1a; 【Python爬虫开发基础⑦】urllib库的基本使用 【Python爬虫开发基础⑧】XPath库及其基本用法 …

Windows环境下设置redis开启自动启动

一、首先下载好Redis 二、设置Redis服务 由于上面虽然启动了redis&#xff0c;但是只要一关闭cmd窗口&#xff0c;redis就会消失。所以要把redis设置成windows下的服务。 打开电脑的服务列表发现并没有所谓的Redis的服务。 我们需要进入到你安装的Redis的目录中&#xff0c;通…

系列五、NotePad++下载安装

一、下载 链接&#xff1a;https://pan.baidu.com/s/1U2f74vfBJIds7W2wJYnBxg?pwdyyds 提取码&#xff1a;yyds 二、安装 2.1、安装NotePad 解压NotePad-x64.zip至指定目录即可&#xff0c;例如 2.2、安装NppFTP 2.2.1、查看NotePad对应的位数&#xff08;32位or64位&a…

8.pixi.js编写的塔防游戏(类似保卫萝卜)-发射圆圈子弹技能

游戏说明 一个用pixi.js编写的h5塔防游戏&#xff0c;可以用electron打包为exe&#xff0c;支持移动端&#xff0c;也可以用webview控件打包为app在移动端使用 环境说明 cnpm6.2.0 npm6.14.13 node12.22.7 npminstall3.28.0 yarn1.22.10 npm config list electron_mirr…

cp命令IO代码实现实例

需求内容&#xff1a; 编写一个类似于cp命令的程序&#xff0c;当使用该程序复制一个包含空洞&#xff08;连续的空字节&#xff09;的普通文件时&#xff0c;要求目标文件的空洞与源文件保持一致。 测试一&#xff1a;普通文件的复制 #include <sys/types.h> #include …

升哲科技受邀出席第十四届夏季达沃斯论坛

6月27日至29日&#xff0c;第十四届夏季达沃斯论坛将在天津举办&#xff0c;国务院总理李强将出席论坛&#xff0c;并在开幕式上发表特别致辞。 升哲科技&#xff08;SENSORO&#xff09;创始人兼CEO赵武阳作为中国新生代商业领袖代表&#xff0c;受邀参加开幕式以及主论坛&am…

如何查看阿里云https账号密码

克隆git上的项目时出现身份验证&#xff0c;此时需要阿里云https密码 查看阿里云https密码&#xff1a;

事务管理秘籍:MySQL引擎的黄金法则

前言 大家在生活中肯定使用过微信或者支付宝转账吧&#xff0c;那么大家有没有想过一个问题呢&#xff1f;就是如果你向商家转账了&#xff0c;但是突然微信或者支付宝服务器出现问题了&#xff0c;商家并没有收到转账该怎么办呢&#xff1f; 今天我将来带大家了解解决这一问…

浙大GMSCM十周年庆典圆满闭幕!宁海元携易知微进行主题分享

6月24日&#xff0c;浙江大学与加拿大麦吉尔大学携手创办的全球制造与供应链管理硕士项目&#xff08;Master in Global Manufacturing and Supply Chain Management&#xff09;十周年庆典在浙江大学隆重召开。本次论坛致力于为制造业、服务业、物流业、金融业等各行业管理人员…

Java安装并使用Jmter测试微服务高并发下的服务雪崩场景

高并发会给微服务带来什么样的的问题? 在微服务架构中,我们将业务拆分成一个个的服务,服务和服务之间可以互相调用,但是由于网络原因或者自身的原因,服务并不能保证服务100%是可用的,如果单个服务出现问题,调用这个服务的时候就会出现网络延迟在系统中一直阻塞等待(阻塞就意味…

【kubernetes系列】Kubernetes之service

本章节将分享一下关于kubernetes中service的相关知识。 一、service 概述 Service也是Kubernetes里的最核心的资源对象之一&#xff0c;正是因为对此概念的支持&#xff0c;Kubernetes在某种角度下可以被看成是一种微服务平台。由于Kubernetes中的pod并不稳定&#xff0c;比…

从0到1精通自动化测试,pytest自动化测试框架,pytest分布式执行(pytest-xdist)(十六)

一、前言 平常我们手工测试用例非常多时&#xff0c;比如有1千条用例&#xff0c;假设每个用例执行需要1分钟 如果一个测试人员执行需要1000分钟才能执行完&#xff0c;当项目非常紧急的时候&#xff0c;我们会用测试人力成本换取时间成本&#xff0c;这个时候多找个小伙伴把…

【技术操作】如何通过抓包来分析EasyCVR不回复上级平台的invite请求?

EasyCVR平台基于云边端协同架构&#xff0c;可支持多协议、多类型的海量设备接入与分发&#xff0c;平台既具备传统安防视频监控的能力&#xff0c;也具备接入AI智能分析的能力&#xff0c;在线下均有大量应用。 有用户反馈&#xff0c;在级联时&#xff0c;使用EasyCVR作为下级…

【2023年全新保姆级教程】解决Ubuntu文件系统磁盘空间不足low disk space on filesystem root

** 解决Ubuntu22.04文件系统磁盘空间不足low disk space on filesystem root ** 大家好&#xff0c;我是洲洲&#xff0c;欢迎关注&#xff0c;一个爱听周杰伦的程序员。关注公众号【程序员洲洲】即可获得10G学习资料、面试笔记、大厂独家学习体系路线等…还可以加入技术交流…

QGIS实战操作-解决TIFF影像黑边问题

QGIS实战操作-解决TIFF影像黑边问题 问题描述 "TIFF图像黑边问题"就是当我们处理或使用TIFF格式的遥感或者地理信息数据时&#xff0c;经常会在图像边缘看到一些不该出现的黑色区域&#xff0c;这些黑边可能会影响我们对图像的观看体验&#xff0c;甚至可能对图像的…