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

l&WK

已于 2023-06-29 11:14:38 修改

阅读量4.7k

点赞数

分类专栏： JS 文章标签： layui 前端 javascript

于 2023-06-28 16:07:43 首次发布

本文链接：https://blog.youkuaiyun.com/lwkliuwenkang/article/details/131439112

版权

文章介绍了如何使用layui.laydate插件在HTML中创建时间选择器，并提供了两种JS实现方式，包括设置快捷选项如本周、本月、本年等，以及处理选择后的事件，将选择的时间范围赋值给隐藏的输入字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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

最低0.47元/天解锁文章