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

layui 日期插件layDate 绑定 动态添加 增加多个 行内调用 js代码调用_第1张图片

起因

* 本人是在一家互联金融公司,因项目需求 要实现如上图的效果 从网上查阅了很多资料 ,无果而终,最终想到了 动态更改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 = "
  • >" + "'caozuo_btn caozuo_delete'>删除" + "" + "
    'layui-input-inline layer-icon-data'>" + " 'text' class='layui-input' id='fuxiTime_" + i + "' class='fuxiTime' placeholder='' name='interest_payment_time' onfocus=\"laydate({'elem': '#fuxiTime_" + i + "',format:'YYYY-MM-DD'});\" >" + "
    " + "
  • "
    ; if($(this).is(".caozuo_add")) { $(this).parents("ul").append(lis); i++; }; if($(this).is(".caozuo_delete")) { $(this).parent("li").remove(); }; }) }

    开放现代写法

    
    <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" 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(
        "

    "
    + "添加"+num+"时间:"+ ""+ "" ); //执行一个laydate实例 laydate.render({ elem: '#add_time'+num //指定元素 }); num++; }
    script> body> html>

    关于 日期插件 样式说明

    layui 日期插件layDate 绑定 动态添加 增加多个 行内调用 js代码调用_第2张图片


    layui 日期插件layDate 绑定 动态添加 增加多个 行内调用 js代码调用_第3张图片

    layDate 版本不同 样式也就不同 当然功能没有太大变化 所以说样式和CSS 没有很大的关联性。


    结束

    思路固然 重要 , 但是没有先人指路,也是虾扯淡!

    你可能感兴趣的:(layui)