zoukankan      html  css  js  c++  java
  • 处理 laydata 时间日期插件 动态添加多个的问题

    上代码

            $('.datetime').each(function () {
                dateBind(this)
            });
    
            function dateBind(this_){
                laydate.render({
                    elem: this_
                    , type: 'month'
                    , closeStop: this_
                    , trigger: 'click'
    
                });
            }

    如需二次电泳那么必须 获取到 lay-key这个属性

    var num = 0;
            $('.add-min').on('click','.add-experience',function(){
                let dom = $('.experience').eq(0);
                let html = dom.clone(true);
                //删除
                let html2 = '<a href="javascript:;" class="del-experience"><i class="layui-icon layui-icon-close-fill font-size-40"></i></a>';
                $(html).append(html2);
    
                //时间日期
                if(num == 0){
                    num = $('.experience').eq(-1).find('.datetime').eq(-1).attr('lay-key');
                }
                $(html).find('.datetime').each(function () {
                    num = parseInt(num)+1;
                    $(this).attr('lay-key',num);
                    dateBind(this)
                    console.log(num)
                });
    
                $(this).parent().before(html);
                form.render(null, 'form-test');
            })

    附上HTML 参考

                          <div class="layui-card-body experience">
                            <div class="layui-form-item">
                                <div class="layui-input-inline" style=" 200px;">
                                    <input type="text" name="company_name" required  lay-verify="required" placeholder="请输入公司名称" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline" style=" 200px;">
                                    <input type="text" name="job_begin_date" required  lay-verify="required" placeholder="请选择在职开始时间" autocomplete="off" class="layui-input datetime">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline" style=" 200px;margin: 0">
                                    <input type="text" name="job_end_date" required  lay-verify="required" placeholder="请选择离职时间" autocomplete="off" class="layui-input datetime">
                                </div>
                                <div style=" auto;margin: 0;" class="layui-input-inline checkbox-date">
                                    <input type="checkbox" class="is_now" lay-filter="is_now" name="is_now" title="至今">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline" style=" 200px;">
                                    <input type="text" name="job_position" required  lay-verify="required" placeholder="请输入工作职位" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-inline" style=" 200px;">
                                    <input type="checkbox" name="experience_verification" title="工作履历验证" lay-filter="test" lay-skin="primary" checked disabled>
                                </div>
                                <div class="layui-input-inline" style=" 200px;">
                                    <input type="checkbox" name="performance_verification" title="工作表现鉴定" lay-filter="test" lay-skin="primary">
                                </div>
    
                                <div class="layui-input-inline vip_service" style=" 200px;display: none">
                                    <input type="checkbox" name="vip_service_num" title="是否特色模式" lay-filter="test" lay-skin="primary">
                                </div>
                            </div>
    
                            <!--<a href="javascript:;" class="del-experience">
                                 <i class="layui-icon layui-icon-close-fill font-size-40"></i>
                            </a>-->
                            <hr>
                        </div>
  • 相关阅读:
    【★】Web精彩实战之
    【★】Web精彩实战之
    Color.js增强你对颜色的控制
    JS查错小工具-三生有幸【推荐】
    JS查错小工具-三生有幸【推荐】
    人工智能成功识别“色情暴力”信息????
    新浪博客“网络繁忙请稍后再试”
    《OD大数据实战》Sqoop入门实例
    《OD大数据实战》驴妈妈旅游网大型离线数据电商分析平台
    《OD大数据实战》HBase入门实战
  • 原文地址:https://www.cnblogs.com/liuxd/p/13491042.html
Copyright © 2011-2022 走看看