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

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

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

在这里插入图片描述

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值