《layui时间插件能用但页面重载时执行绑定不上时间的解决方法》

最新推荐文章于 2024-03-13 10:12:17 发布
最新推荐文章于 2024-03-13 10:12:17 发布
阅读量293 收藏
点赞数
分类专栏： MVC Layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44540481/article/details/105805559
版权
在使用layui时间插件时，开发者遇到页面重载后时间绑定失效导致错误的问题。通过浏览器检查发现，尽管时间插件能正常弹出选择，但在执行过程中未能正确获取时间值。经过排查，错误源在于使用的layui.js文件，更换为layui.all.js后，时间值能够正常获取，解决了问题。
摘要由CSDN通过智能技术生成

 

 

 

开发工具与关键技术： Visual Stadio 2015与layui时间插件

作者：何石涛

撰写时间：2020 年 4  月 27 日

 

Layui时间和日期组件：（本部分摘抄于Layui文档）

如你所见，layDate 在 layui 2.0 的版本中迎来一次重生。无论曾经它给你带来过多么糟糕的体验，从今往后，所有的旧坑都将弥合。全面重写的 layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。内置强劲的自定义日期格式解析和合法校正机制，含中文版和国际版，主题简约却又不失灵活多样。由于内部采用的是零依赖的原生 JavaScript 编写，因此又可作为独立组件使用。毫无疑问，这

最低0.47元/天 解锁文章
LBJคิดถึง 小迷弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决layui laydate 时间控件一闪而过的问题
10-16
在多次重载同一页面时，如果不清理这个属性，新生成的时间控件可能会与旧的冲突。因此，可以尝试在每次创建时间控件时移除lay-key属性，以确保每次都能生成一个新的独立实例。 2. 在每次加载页面时重新绑定时间控件...
Layui带搜索的下拉框的使用以及动态数据绑定方法
10-16
在使用Layui的下拉框时，还需要注意的一点是在数据绑定完成后，需要调用form.render()方法来重载表单。如果没有这一步操作，下拉框的数据可能会时有时无，绑定的数据可能不稳定，造成用户体验的下降。 最后，Layui...
Layui表格重载后点击日期选择闪一下或是长按才能显示.
qq_16186465的博客
12-12 362
Layui表格重载后点击日期选择闪一下或是长按才能显示. 前言 首先我的日期选择是放在数据表格的表头工具条中的，但我重载数据表格后日期选择点一下就消失了，切到其他窗口再回来它会自己弹出来，或者长按也可以显示，但是一松开就消失了。 解决方法 如果你也和我遇到的情况差不多，不妨可以试试下面的方法。 var tableIns=table.render({ elem: '#userTable' //这是<table>的id ,... ,done: function () { //time1,t
vue调用layui日期选择器： 数据双向绑定失败
肉卷
03-19 2679
vue调用layui日期选择器 出现问题： 1.无法进行数据双向绑定 2.无论是单向数据绑定还是双向数据绑定，选择日期后，同级input元素输入新值，日期选择器input标签值将被清空 3.layui 日期选择器的change事件无效 个人觉得以上问题原因为： 问题一： layui是通过js将日期选择器html片段添加到html文件中，此时vue已经完成数据绑定，故此处的数据双向绑定无效。 问题...
layui动态绑定日期时间控件
liaoyi9203的博客
08-11 3854
layui动态绑定日期时间控件 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的...
layui 动态绑定日期控件遇到的坑
qq_42379938的博客
06-20 846
layui 动态绑定日期控件
layui 使用laydate动态创建多个时间选择框
weixin_43652106的博客
12-24 1919
记录：layui框架， js使用 laydate动态创建多个时间选择框，点击无效问题。此外，使用laydate时间选择框生效的关键一点是，laydate框架会给input输入框增加一个lay-key=“1”，1也可能是其他数字。 例如下图所示，js实现动态添加多行数据，并使用laydate动态创建多个时间选择框 HTML代码： <style> .layui-table th{padding: 9px 5px;} .layui-table td{ padding: 9px
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
10-16
要实现这个功能，我们可以使用layui的表格插件监听工具条事件。例如，我们可以监听名为'demo'的工具条事件，当用户点击'find'操作时，将当前行的数据（`obj.data`）转换为JSON字符串并存储到全局变量`json`中。然后...
layUI重载时间选择器
qq_42582773的博客
10-12 366
layUI 时间选择器重载失效？ 今天，在实习的过程中，用到layUI时间选择器重载失效的问题。通过网络学习知道了，可以将每个时间选择器的lay-key去掉。 JS实现 document.getElementById("time1").removeAttr("lay-key"); document.getElementById("time2").removeAttr("lay-key"); ...
laydate重新加载问题
weixin_46089767的博客
09-08 1028
laydate重新加载问题遇到的问题 遇到的问题 一开始定义日期没有要求，但是后面需要在原有的基础上设置最小值，重新使用laydate.render(***)没用，后来想到直接把原来的input删了，重新写个input就可以了 $("#a").empty(); $("#a").html(` <input type="text" name="" id="" lay-verify="required" autocomplete="off" c
layui 日期重置_layui清空时间控件后无法二次选择的解决方法
qq_41917238的博客
02-01 797
坑二 ：startDate.config.max与endDate.config.min是一个对象，不是一个字符串，endDate.config.min="2017-01-01"；坑一 ：laydate.render无法重复渲染，当laydate.render对应一个elem已经渲染过一次之后，我们是无法通过再次渲染来修改其中的max值与min值的。开始时间和结束时间选择后，再次修改开始时间 选择不起，没有二次渲染，需要重新设置min 和 max来二次渲染。layuidate 版本2.4.3 仅供参考。
解决layui在同一页面绑定多个laydate控件时候的重复渲染、闪退问题
weixin_44229267的博客
07-04 966
【代码】解决layui在同一页面绑定多个laydate控件时候的重复渲染、闪退问题。
layui 时间控件二次渲染，点击一个自定义按钮清空/重置时间控件
Start2019
05-10 6417
二、时间控件二次渲染的3种方法：2.1 直接删除原来绑定时间控件的DOM，再重新渲染；2.2 使用 `clone()` ，并且改变 `lay-key`；2.3 使用 `clone()` ，并且删除 `lay-key 三、通过一个按钮清空时间限制：不通过二次渲染清空时间控件的时间限制 四、清空 range:true 的日期范围控件； 五、使用 laydate 过程中需要注意的地方
JavaWeb——LayUi 时间选择器重载清空值
weixin_45803109的博客
12-28 2363
需求说明： 说明： 选择开始时间，结束时间，判断开始时间不可大于结束时间，如果大于提示弹窗+清空当前时间选择器的值。 过程： 去网上找了大半天，什么赋值什么的，由于我这个是多个选择器，导致大都不行，尝试了一堆方法无用后，想到一个解决办法。 解决： 构思：无法在选择后回调清空值，那就移除内容进行再次渲染操作，可以达到清空效果。 代码： 以下是装载代码： //设置时间选择器 var child=$('.layer...
layui中的laydate.render二次加载失效的原因
热门推荐
gbh666666的博客
12-07 1万+
layui.use('laytpl', function(laytpl){ //温馨提示：多次调用use并不会重复加载laytpl.js，Layui内部有做模块cache处理。 var html = laytpl('').render({}); console.log(html); }); 也就是说，其实layui里面的插件，其实在根本上来说只要渲染一次就进入了缓存了，所以，在第一次渲染完就...
layUI中table重载后表头时间控件失效解决方法，已实践
HandsomeGuy_的博客
11-15 1494
在表格重载的时候会刷新表头的所有表单控件，所以需要在表格重载函数done回调中重新绑定一次时间控件，已实践成功。 已试过表单重载函数及时间控件重载均无效。如果有更好的方法欢迎分享 table.reload('表格ID',{ where:field, done:function () { //执行一个laydat...
layui中的laydate 失效
最新发布
qq_42782011的博客
03-13 661
首先绑定切记不可 使用id选择器，不然解决不了，这样重新渲染一下就可以了。
如何 layui不走 重载 刷新table
06-07
在 layui 的 table 组件中，有两种方式可以更新表格数据，一种是使用重载（reload）方法，另一种是使用刷新（refresh）方法。其中，重载方法会重新加载整个表格，而刷新方法只会重新加载数据。 如果你想在更新表格数据时不走重载方法，可以使用刷新方法。具体步骤如下： 1. 初始化表格时，设置初始的数据接口（url）和数据渲染的模板（cols）。 ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test', url: '/api/data', cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'}, {field: 'city', title: '城市'}, ]] }); }); ``` 2. 在需要刷新数据的地方，在 JavaScript 中使用 table.reload() 方法。 ```javascript // 刷新表格数据 table.reload('test', { url: '/api/refreshData', done: function(res, curr, count){ console.log('数据已刷新'); } }); ``` 在上面的代码中，table.reload() 方法的第一个参数是表格的 id，第二个参数是一个对象，其中 url 属性是新的数据接口地址，done 回调函数会在数据加载完毕后执行。 使用刷新方法可以只更新表格数据而不重新加载整个表格，可以提高性能并改善用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值