layui 日期插件layDate 綁定動態添加增長多個行內調用 js代碼調用

時間 2019-12-06

標籤 layui 日期插件 laydate 綁定動態添加增長多個調用代碼欄目 JavaScript 简体版

原文原文鏈接

原由

本人是在一家互聯金融公司，因項目需求要實現如上圖的效果從網上查閱了不少資料，無果而終，最終想到了動態更改id 避免id重複調用失敗html

保守派 --- 行內調用

<!-- 動態增長 時間插件 -->

    <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 這裏用到的是獨立版本的具體用法能夠參照官網文檔jquery

//付息日期
    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>