上效果图：
参考教程1
参考教程2
<div id="work_div" class="open-form layui-form" bind_id="0" style="display: none;"> <div id="test2" ></div></div>var work_detail = function(e){ var data_id = $(e.srcElement).attr("id"); var bind_id = $('#work_div').attr('bind_id'); if(bind_id != data_id){ var week_day = $(e.srcElement).attr("week_day")?$(e.srcElement).attr("week_day").split(','):[]; //下发数据是"0,1,3" 0是周天 var rest_date = $(e.srcElement).attr("rest_date")?$(e.srcElement).attr("rest_date").split(','):[]; //下发数据是"2020-11-9,2020-11-10,2020-11-11," 数据格式要和laydate 定义统一，下发解决format(Y-n-j)，月日不补零 var work_name = '早班'; var work_time = '00:02 01:00-05:00'; var mark_class = ''; week_day.forEach(function (val, index) { mark_class += '.layui-laydate-content td:nth-child('+val+'),' }); mark_class = mark_class.substring(0, mark_class.length-1) $('#work_div').attr('bind_id', data_id) $('#work_div').html('<div id="test2" ></div>' + '<div><div>班次详情</div><div>'+work_name+' '+work_time+'</div></div>'); layui.use('laydate', function(){ var laydate = layui.laydate; laydate.render({ elem: '#test2' ,position: 'static' ,showBottom: false ,change: function(value, date){ //监听日期被切换 if(week_day.length>0){ var choosedate = $(mark_class).addClass('work_date');//选中所有显示日期的td choosedate.each(function (index,elem) { if(rest_date.indexOf($(this).attr('lay-ymd'))!=-1){ $(this).removeClass('work_date'); } }) $('.work_date').append("<div class="layui-elip work-mark">"+work_name+"</div>");//在选中的td中退出显示价价格的div } } ,ready: function(date){ if(week_day.length>0){ var choosedate = $(mark_class).addClass('work_date');//选中所有显示日期的td choosedate.each(function (index,elem) { if(rest_date.indexOf($(this).attr('lay-ymd'))!=-1){ $(this).removeClass('work_date'); } }) $('.work_date').append("<div class="layui-elip work-mark">"+work_name+"</div>");//在选中的td中退出显示价价格的div } } }); }); } layer.open({ type: 1 ,title: "排班详情" ,area: '650px' ,shade: [0.8, '#393D49'] ,shadeClose:true ,maxmin: true ,content: "#work_div" ,btn: [确定，勾销] ,zIndex:999 ,yes: function(index){ } ,btn2: function(){ layer.closeAll(); } ,success: function(layero,index){ } ,end: function(){ }}); };