起因
本人是在一家互联金融公司，因项目需求 要实现如上图的效果 从网上查阅了很多资料 ，无果而终，最终想到了 动态更改id 避免id重复 调用失败
保守派 --- 行内调用
<!-- 动态增加 时间插件 -->
<div class="layui-form-item">
<label class="layui-form-label"><span>付息日期 :</span></label>
<div class="layui-input-inline">
<ul id="fuxiTime_containt">
<li class="clearfix lay-data-list" >
<span class="caozuo_btn caozuo_add">增加</span>
<label class="layui-form-label"><span>第1次付息日期 :</span></label>
<div class="layui-input-inline layer-icon-data">
<input type="text" name="interest_payment_time" class="layui-input" id="fuxiTime_1" class="fuxiTime" onfocus="laydate({elem:'#fuxiTime_1',format:'YYYY-MM-DD',theme: '#fdd5004'})" >
</div>
</li>
</ul>
</div>
</div>切记 要引入 laydate.js 这里用到的是独立版本的 具体用法 可以参照官网文档
//付息日期
fuxiTime();
function fuxiTime() {
if(!$(".fuxiTime .caozuo_btn")) return;
var i = 2;
$("ul#fuxiTime_containt").delegate(".caozuo_btn", "click", function() {
var lis = "<li class='clearfix lay-data-list'>" +
"<span class='caozuo_btn caozuo_delete'>删除</span>" +
"<label class='layui-form-label'><span>第" + i + "次付息日起 :</span></label>" +
"<div class='layui-input-inline layer-icon-data'>" +
" <input type='text' class='layui-input' id='fuxiTime_" + i + "' class='fuxiTime' placeholder='' name='interest_payment_time' onfocus=\"laydate({'elem': '#fuxiTime_" + i + "',format:'YYYY-MM-DD'});\" >" +
"</div>" +
"</li>";
if($(this).is(".caozuo_add")) {
$(this).parents("ul").append(lis);
i++;
};
if($(this).is(".caozuo_delete")) {
$(this).parent("li").remove();
};
})
}开放现代写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 layDate 独立版</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<style>
body{padding: 20px;}
.demo-input{padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6; background-color: #fff; border-radius: 2px;}
.demo-footer{padding: 50px 0; color: #999; font-size: 14px;}
.demo-footer a{padding: 0 5px; color: #01AAED;}
</style>
</head>
<body>
<!-- <input type="text" class="demo-input" placeholder="请选择日期" id="test1"> -->
<input type="text" class="demo-input" key='add_time1' placeholder="请选择日期" id="add_time" />
<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal addTime1" data-type='addTimes' onclick="addTime()" >
<i class="layui-icon"></i>增加
</button>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="laydate/laydate.js"></script> <!-- 改成你的路径 -->
<script>
// lay('#version').html('-v'+ laydate.v);
//执行一个laydate实例
laydate.render({
elem: '#add_time' //指定元素
});
</script>
<script>
var num = 2;
function addTime(){
$('.addTime'+(parseInt(num)-parseInt(1))).after(
"<br><br>"+
"添加"+num+"时间："+
"<input type='text' class='demo-input' key='add_time"+num+"' placeholder='请选择日期' id='add_time"+num+"'>"+
"<button class='layui-btn layui-btn-sm layui-btn-radius layui-btn-normal addTime"+num+"' data-type='addTimes'>"+
"<i class='layui-icon'></i>增加"+
"</button>"
);
//执行一个laydate实例
laydate.render({
elem: '#add_time'+num //指定元素
});
num++;
}
</script>
</body>
</html>
关于 日期插件 样式说明
layDate 版本不同 样式也就不同 当然功能没有太大变化 所以说样式和CSS 没有很大的关联性。
结束
思路固然 重要 ， 但是没有先人指路，也是虾扯淡！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。