动态添加的layui date标签，不弹出日期选择

最新推荐文章于 2025-06-18 15:09:18 发布

MervynLammm

最新推荐文章于 2025-06-18 15:09:18 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Layui

本文链接：https://blog.csdn.net/Rec_Mervyn/article/details/83242833

Layui 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在动态表格中使用laydate日期选择器的方法，解决了动态添加行时日期选择器无法正常工作的问题。通过为每个新添加的日期输入框生成随机ID并重新渲染laydate，确保了所有日期选择器的正常功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前有一篇文章提到动态添加、删除一行的实现方法

其中我在table里有laydate元素，动态添加的laydate不弹出日期选择，根据class渲染的时候会出现出了第一个可以正常显示，别的都闪退的情况。

最终是在每次添加的时候都对新添加的元素进行ID重新渲染才解决的。

为了避免ID重复，给了一个随机数。

表格及初始渲染

<table class="layui-table" id="table" lay-filter="table">
	<thead>
		<tr>
			<td>时间</td>
			<td>操作</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="text" class="layui-input dateInput"></td>
			<td>
				<a class="layui-btn layui-btn-xs add">添加</a>
				<a class="layui-btn layui-btn-danger layui-btn-xs del">删除</a>
			</td>
		</tr>
	</tbody>
</table>

layui.use(['laydate', 'table'], function() {
    var laydate = layui.laydate;
    var table = layui.table;
    
    //原有表格日期渲染
    laydate.render({
        elem: '.dateInput'
        ,trigger: 'click' //采用click弹出
    });
});

添加按钮事件

//随机数生成
function getRandomNum() {
    return parseInt(Math.random()*50);
}

$('body').on('click', '.add', function() {
	var idNum = getRandomNum();//获取随机数
	var html = '<tr>'+
    '	<td><input type="text" class="layui-input dateInput" id="date_'+idNum+'"></td>'+
    '	<td>'+
    '		<a class="layui-btn layui-btn-xs add">添加</a>'+
    '		<a class="layui-btn layui-btn-danger layui-btn-xs del">删除</a>'+
    '	</td>'+
    '</tr>';
    $(html).appendTo($('#table tbody:last'));
    //重新渲染日期选择input，并指向添加的id
    laydate.render({
        elem: '#date_'+idNum
        ,trigger: 'click' //采用click弹出
    });
});