您的位置：首页 > 产品设计 > UI/UE

layui 日期插件layDate 绑定动态添加增加多个行内调用 js代码调用

2018-03-31 15:23 701 查看

起因

* 本人是在一家互联金融公司，因项目需求要实现如上图的效果从网上查阅了很多资料，无果而终，最终想到了动态更改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>