效果
css
/* 日历选中颜色 */
.layui-laydate .layui-bg01 {
background-color: #8de7ed !important;
color: #fff !important;
}
.layui-laydate .layui-bg02 {
background-color: #ccccff !important;
color: #fff !important;
}
.layui-laydate .layui-bg03 {
background-color: #ffadad !important;
color: #fff !important;
}
.layui-laydate .layui-this {
background-color: #22cdc9 !important;
color: #fff !important;
}
html
<div class="site-demo-laydate">
<div class="layui-inline date_time" id="test-n1"></div>
</div>
js
var timeAll = ["2022-5-31", "2022-6-1", "2022-6-2", "2022-6-3", "2022-7-1", "2022-7-24", "2022-7-29"]; //已交
var timeIn = ["2022-5-30", "2022-6-6", "2022-6-7", "2022-6-8", "2022-7-9", "2022-7-10", "2022-7-11"]; //未交
var timePart = ["2022-6-16", "2022-6-13", "2022-6-14", "2022-6-15",]; //补交
layui.use('laydate', function () {
var laydate = layui.laydate;
//直接嵌套显示
laydate.render({
elem: '#test-n1'
, position: 'static'
// , theme: '#22cdc9'
, showBottom: false
, ready: function (date) {
// console.log(dates);
$('.layui-laydate-content').find("td").each(function (i, e) {
// console.log(dates.indexOf($(e).attr('lay-ymd')));
if (timeAll.indexOf($(e).attr('lay-ymd')) >= 0) {
$(e).addClass('layui-bg01');
} else if (timeIn.indexOf($(e).attr('lay-ymd')) >= 0) {
$(e).addClass('layui-bg02');
} else if (timePart.indexOf($(e).attr('lay-ymd')) >= 0) {
$(e).addClass('layui-bg03');
}
});
}
});
//回调 标记
$('.laydate-next-y,.laydate-next-m,.laydate-prev-y,.laydate-prev-m,.laydate-set-ym,.layui-laydate-content').click(function () {
$('.layui-laydate-content').find("td").each(function (i, e) {
// console.log(dates.indexOf($(e).attr('lay-ymd')));
if (!$(e).hasClass('layui-bg01')) {
if (timeAll.indexOf($(e).attr('lay-ymd')) >= 0) {
$(e).addClass('layui-bg01');
}
else if (timeIn.indexOf($(e).attr('lay-ymd')) >= 0) {
$(e).addClass('layui-bg02');
}
else if (timePart.indexOf($(e).attr('lay-ymd')) >= 0) {
$(e).addClass('layui-bg03');
}
}
});
});
});