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

最新推荐文章于 2023-07-04 16:23:09 发布

weixin_34112208

最新推荐文章于 2023-07-04 16:23:09 发布

阅读量1.9k

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016138428

版权

这里写图片描述

起因

本人是在一家互联金融公司，因项目需求要实现如上图的效果从网上查阅了很多资料，无果而终，最终想到了动态更改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">&#xe615;</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'>&#xe615;</i>增加"+
    "</button>"
  );
  //执行一个laydate实例
  laydate.render({
    elem: '#add_time'+num       //指定元素
  });

  num++;
}


</script>
</body>
</html>