处理 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="width: 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="width: 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="width: 200px;margin: 0">
<input type="text" name="job_end_date" required lay-verify="required" placeholder="请选择离职时间" autocomplete="off" class="layui-input datetime">
</div>
<div style="width: 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="width: 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="width: 200px;">
<input type="checkbox" name="experience_verification" title="工作履历验证" lay-filter="test" lay-skin="primary" checked disabled>
</div>
<div class="layui-input-inline" style="width: 200px;">
<input type="checkbox" name="performance_verification" title="工作表现鉴定" lay-filter="test" lay-skin="primary">
</div> <div class="layui-input-inline vip_service" style="width: 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>
处理 laydata 时间日期插件 动态添加多个的问题的更多相关文章
- 解决laydate时间日期插件定位溢出
laydate是一款比较好用的网页时间日期插件,不过用起来有一些细节问题需要我们手动去解决!例如:laydate兼容bootstrap 1. 默认情况 laydate弹出层默认对齐input左边框 2 ...
- 第一好用的时间 日期插件(Adding a Timepicker to jQuery UI Datepicker)
最近在一个项目中用到了My97DatePicker,国人写的一个挺不错的时间选择插件,简单易用,但是在调试静态时却发现此插件必须产生一个iframe标签指向其主页,试了很多种方法都不能去除 ...
- XgCalendar日历插件动态添加参数
在使用xgcalendar日历插件的时候,参数数组并非只有类型.显示时间.时区等这些参数,还可以根据extParam自定义参数扩展搜索条件,例如根据用户Id搜索不同用户的日历信息,需要将用户的Id存在 ...
- BootStrap-select插件动态添加option无法显示
问题描述: 在使用bootstrap-select插件时出现下拉框无法显示动态追加的option,经过查看element元素发现,select标签已经append进去了所需的option选项,但是页面 ...
- 一款好用的JS时间日期插件layDate
觉得这个插件很不错,使用起来也很方便,推荐使用 1.插件截图 2.插件配置 选择很多,配置也很简单,插件官网:https://www.layui.com/laydate/配置说得很明确,基本操作就是: ...
- bootstrapValidator插件动态添加和移除校验
bootstrapValidator对动态生成的表单进行校验,需要调用方法:addField. 方法:addField(field,option); field可以是表单的name也可以是jQue ...
- bootstrap validate 验证插件 动态添加和动态删除验证项
//添加验证项 function addField(field, notEmptyMsg, othercon) { if (!othercon) { $("#gyssave").b ...
- jQuery时间日期插件laydate,兼容bootstrap
解压后,将laydate整个文件放至您项目的任意目录,不要移动其文件结构,它们具有完整的依赖体系. 使用只需在页面引入laydate.js即可. 如果您的网站的js采用合并或模块加载,您需要打开lay ...
- jq时间日期插件的使用-datetimepicker
分三步 首先引入各种包 然后搞哥容器用id 然后加入一段js 实例: 下载:http://files.cnblogs.com/files/wordblog/datetimepicker-maste ...
- 【2017-05-19】WebForm复合控件、用DropDownList实现时间日期选择。
自动提交的属性: AutoPostBack="True" 1.RadioButtonList 单选集合 -属性:RepeatDirection:Vertical (垂直排布 ...
随机推荐
- wpf 如何7步写一个badge控件
首先看一下效果: 任意控件可以附加一个文字在控件的右上角,并带有红色背景 第一步,新建一个空的wpf项目: 第二步,创建一个类,取名为badge: 第三步,将badge的父类设置成 System.W ...
- 为什么使用#define 而不是用enum定义常量
typedef enum { IOTAG_PORT__A = (0), IOTAG_PORT__B, IOTAG_PORT__C, IOTAG_PORT__F, IOTAG_PORT__ITEMS } ...
- 一加8t救砖教程
关机 按住音量上下和电源键 重启到fastboot 取到原系统boot ./fastboot flash boot_a boot.img ./fastboot flash boot_b boot.im ...
- 网站接入qq登录
网站接入qq登录可以省去注册账号,增加网站的体验度.那么要实现我自己搭建的站点天天博客的qq单点登录需要以下几个步骤:1,申请appid和appkey 首先要去https://connect.qq.c ...
- Python if __name__ == "__main__" 解释
一种机制,允许脚本以不同的方式运行,这取决于作为独立的程序执行还是作为模块被其他脚本导入.这种机制就是 if __name == "__main__" 其作用是控制某些代码块只在该 ...
- Java面试集锦(一)
计算机网络 摘要:1. 在浏览器中输入url地址 显示主页的过程,整个过程会使用哪些协议 image.jpeg总体来说分为以下几个过程: DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回 ...
- Go runtime 调度器精讲(四):运行 main goroutine
原创文章,欢迎转载,转载请注明出处,谢谢. 0. 前言 皇天不负有心人,终于我们到了运行 main goroutine 环节了.让我们走起来,看看一个 goroutine 到底是怎么运行的. 1. 运 ...
- ASP.NET Core – Data Protection & Azure Storage + Azure Key Vault
前言 以前就写过很多篇了 Asp.net core 学习笔记 ( Data protection ) Asp.net core 学习笔记 Secret 和 Data Protect Azure key ...
- 系统编程-进程-close-on-exec机制
我的相关博文: 系统编程-进程-exec系列函数超级详解(带各种实操代码) 一般我们会调用exec执行另一个程序,此时会用全新的程序替换子进程的正文,数据,堆和栈等. 此时保存文件描述符的变量当然也不 ...
- iManager微服务(云套件)配置https证书流程步骤
本文使用的是10.1版本,需要手动去配置证书,未来版本会考虑进行界面化配置. 一.提前准备 1. 证书需要准备三个文件 *.key *.crt *.keystore 2. 需要知道自己创建的微服务是哪 ...