layui的laydate日期与时间选择器本身不带周选择和季度选择，最近因项目需求，需要用到周选择和季度选择，于是度娘查询了一下实测可用并存档记录备用。
<!-- 引入 layui.css --> <link href="/sataic/layui/css/layui.css" rel="stylesheet"> <!-- 引入 jquery.min.js --> <script src="/sataic/js/jquery.min.js" rel="stylesheet"></script> <!-- 引入 layui.js --> <script src="/sataic/layui/layui.js"></script>
<div class=" layui-form-item"> <div class="layui-inline layui-form"> <div class="layui-input-inline"> <select name="type" id="selectedOption" lay-filter="college"> <option value="day" selected="selected">按日统计</option> <option value="week">按周统计</option> <option value="month">按月统计</option> <option value="quarter">按季度统计</option> <option value="year">按年统计</option> </select> </div> <label class="layui-inline" id="worldlable" style="width: 190px;"> <input id="worldId" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off"> </label> </div> </div>
<script type="text/javascript">
layui.use(['form', 'laydate'], function() {
var form = layui.form;
var laydate = layui.laydate;
renderWeekDate('#worldId', '');
form.on('select(college)', function(data) {
let opt = $("#selectedOption").val();
let ele = $("#selectedOption");
$("#worldId").remove();
$("#worldlable").html('<input id="worldId" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">');
// 月
if (opt == "month") {
laydate.render({
elem: '#worldId',
type: 'month',
max: genTime('month'),
value: genTime('month'),
btns: ['clear', 'confirm']
});
// 日
} else if (opt == "day") {
laydate.render({
elem: '#worldId',
type: 'date',
max: genTime('day'),
value: genTime('day'),
btns: ['clear', 'confirm']
});
// 周
} else if (opt == "week") {
renderWeekDate('#worldId', '');
// 季度
} else if (opt == "quarter") {
renderSeasonDate('#worldId', '');
// 年
} else if (opt == "year") {
laydate.render({
elem: '#worldId',
type: 'year',
max: genTime('day'),
value: genTime('year'),
btns: ['clear', 'confirm']
});
}
});
// 周
function renderWeekDate(ohd, sgl) {
let ele = $(ohd);
laydate.render({
elem: ohd,
type: 'date',
max: genTime('day'),
format: "yyyy-MM-dd~yyyy-MM-dd",
btns: ['clear', 'confirm'],
done: function(value, date, endDate) {
if (value != "" && value.length > 0) {
let today = new Date(value.substring(0, 10));
let weekday = today.getDay();
let monday;
let sunday;
if (weekday == 0) {
monday = new Date(1000 * 60 * 60 * 24 * (weekday - 6) + today.getTime());
} else {
monday = new Date(1000 * 60 * 60 * 24 * (1 - weekday) + today.getTime());
}
if (weekday == 0) {
sunday = today;
} else {
sunday = new Date(1000 * 60 * 60 * 24 * (7 - weekday) + today.getTime());
}
let month = monday.getMonth() + 1;
if (month < 10) {
month = "0" + month;
}
let day1 = monday.getDate();
if (day1 < 10) {
day1 = "0" + day1;
}
let start = "" + monday.getFullYear() + "-" + month + "-" + day1;
let month2 = sunday.getMonth() + 1;
if (month2 < 10) {
month2 = "0" + month2;
}
let day2 = sunday.getDate();
if (day2 < 10) {
day2 = "0" + day2;
}
let end = "" + sunday.getFullYear() + "-" + month2 + "-" + day2;
ele.val(start + "~" + end);
} else {
ele.val('');
}
}
});
}
// 季度
function renderSeasonDate(ohd, sgl) {
let ele = $(ohd);
laydate.render({
elem: ohd,
type: 'month',
format: 'yyyy-M',
btns: ['clear', 'confirm'],
ready: function(value, date, endDate) {
let hd = $("#layui-laydate" + ele.attr("lay-key"));
if (hd.length > 0) {
hd.click(function() {
quarter($(this));
});
}
quarter(hd);
},
done: function(value, date, endDate) {
if (!isNull(date) && date.month > 0 && date.month < 5) {
ele.attr("startDate", date.year + "-" + date.month);
} else {
ele.attr("startDate", "");
}
if (!isNull(endDate) && endDate.month > 0 && endDate.month < 5) {
ele.attr("endDate", endDate.year + "-" + endDate.month)
} else {
ele.attr("endDate", "");
}
}
});
}
});
function genTime(opt) {
let now = new Date();
let year = now.getFullYear();
let mth = now.getMonth();
let day = now.getDate();
let month = mth + 1;
if (month < 10) {
month = '0' + month
}
if (day < 10) {
day = '0' + day
}
let str;
if (opt == 'day') {
str = year + '-' + month + '-' + day;
} else if (opt == 'month') {
str = year + '-' + month;
}
return str;
}
function quarter(thiz) {
let mls = thiz.find(".laydate-month-list");
mls.each(function(i, e) {
$(this).find("li").each(function(inx, ele) {
let cx = ele.innerHTML;
if (inx < 4) {
ele.innerHTML = cx.replace(/月/g, "季度");
} else {
ele.style.display = "none";
}
});
});
}
function isNull(quarter) {
if (quarter == null || typeof(quarter) == "undefined" || quarter == "") return true;
return false;
}
/**
* 日期转为周 格式2020-07-14
*/
function getYearWeek(dateString) {
let da = dateString; //日期格式2015-12-30
//当前日期
let date1 = new Date(da.substring(0, 4), parseInt(da.substring(5, 7)) - 1, da.substring(8, 10));
//1月1号
let date2 = new Date(da.substring(0, 4), 0, 1);
//获取1月1号星期（以周一为第一天，0周一~6周日）
let dateWeekNum = date2.getDay() - 1;
if (dateWeekNum < 0) {
dateWeekNum = 6;
}
if (dateWeekNum < 4) {
//前移日期
date2.setDate(date2.getDate() - dateWeekNum);
} else {
//后移日期
date2.setDate(date2.getDate() + 7 - dateWeekNum);
}
let d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
if (d < 0) {
let date3 = (date1.getFullYear() - 1) + "-12-31";
return getYearWeek(date3);
} else {
//得到年数周数
let year = date1.getFullYear();
let week = Math.ceil((d + 1) / 7);
return year + "-" + week;
}
}
</script> 
本站部分文章搜集整理于互联网或者网友提供，如有侵权请联系站长
如若转载，请注明出处：https://www.htmlbk.com/web/2536.html
温馨提示：该文档最后一次修改时间为2025-06-03 11:34:54，请注意相关的内容是否还可用！
