作为 layui 2.0 的核心组成之一,layDate 也是今非昔比了。
看到这么简洁的界面和完善的文档我反手就是一个赞!
页面中有一两个日期选择器的时候,处理还比较方便。
详细请见官方文档:https://www.layui.com/doc/modules/laydate.html
当我们在同一个表单中初始化多个日期时,可能会遇到一些问题。
诸如下图此类情况:
初始状态下只有这一行数据
当我们点击新增按钮时会添加一行
我最初的思路是动态拼接id值,比如在id的后面的加一个变量,变量值随着每次的新增而增加,但是在当前这种场景下使用这种方式还是有点繁琐。
下面呢就通过一个简单的例子详细介绍下实现过程:
html
<table>
<thead>
<tr>
<th>开始时间</th>
<th>结束时间</th>
</tr>
</thead>
<form action="">
<tbody id="tableContent">
<tr>
<td><input type="text" class="layui-input datetime" placeholder="yyyy-MM-dd"></td>
<td><input type="text" class="layui-input datetime" placeholder="yyyy-MM-dd"></td>
</tr>
</tbody>
</form>
</table>
js
<script src="/xxx/layui.js"></script>
<script>
//主要是用到laydate
layui.use( 'laydate', function () {
var laydate = layui.laydate;
//核心方法
function timeAdd(){
lay('.datetime').each(function() {
laydate.render({
elem : this,
trigger : 'click'
});
});
}
//初始化时先调用一次,确保静态的那一行可点
timeAdd();
//给新增按钮添加点击事件
$('.addBtn').click(function(){
tableHtml2 = "<tr>
<td><input type='text' class='layui-input datetime' placeholder='yyyy-MM-dd'></td>
<td><input type='text' class='layui-input datetime' placeholder='yyyy-MM-dd'></td>
</tr>";
$("#tableContent").append(tableHtml)
form.render();
timeAdd()
})
})
</script>
大体的意思基本就是这些了,总之一句话,重点关注timeAdd()方法的调用。