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);
}
});
文章来源：https://www.toymoban.com/news/detail-516531.html
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;
};
文章来源地址https://www.toymoban.com/news/detail-516531.html
到了这里，关于Layui时间范围选择器，添加【本周、本月、本季度、本年等常用时间快捷键】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
