解决在layer.open中使用时间控件laydate失败的问题


Posted in Javascript onSeptember 11, 2019

今天有个需要,用户进入页面的时候,弹出一个弹窗,弹窗中选择一个时间,弹窗大概是这样的:

解决在layer.open中使用时间控件laydate失败的问题

我的思路是,先在页面写好弹窗内容,然后使用lay.open设置content即可:

<div id="layopen">
  时间:<input type="text" id="time"></input>
</div>

layer.open({
  content: $("#layout").html(),
  success: function(){
    laydate({
      "elem": "#time"
    });
  }
});

执行,发现无论怎么点击输入框,时间控件都出不来,也就是说,这种写法下,laydate失效了。然后在官网中找到一个帖子上说,把content: $("#layout").html()改成content: $("#layout")即可,惊喜的发现真的可以,效果如下:

解决在layer.open中使用时间控件laydate失败的问题

效果是实现了,可是顶部的[object object]是什么鬼?

一开始,通过css将顶部的[object object]隐藏了,但是总觉得很别扭。然后经过一番折腾之后发现,其实只要指定下层的类型为页面层就可以完美的解决这个问题:

layer.open({
  layer: 1,
  content: $("#layout").html(),
  success: function(){
    laydate({
      "elem": "#time"
    });
  }
});

注:使用的版本分别为layer3.x.x.,laydate1.x.x,其他版本搭配是否可以直接设置时间未测试。

以上这篇解决在layer.open中使用时间控件laydate失败的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 #Javascript
layer弹出层扩展主题的方法
Sep 11 #Javascript
手写Vue弹窗Modal的实现代码
Sep 11 #Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 #Javascript
layer更改皮肤的实现方法
Sep 11 #Javascript
node 解析图片二维码的内容代码实例
Sep 11 #Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 #Javascript
You might like
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
Smarty模板语法详解
2019/07/20 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
javascript prototype 原型链
2009/03/12 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
Python中的字符串类型基本知识学习教程
2016/02/04 Python
浅谈Python的异常处理
2016/06/19 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
在Python中使用Neo4j的方法
2019/03/14 Python
python3字符串操作总结
2019/07/24 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
如何利用python进行时间序列分析
2020/08/04 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
会计系中文个人求职信
2013/12/24 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
十八届三中全会感言
2014/03/10 职场文书
搞笑征婚广告词
2014/03/17 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
电工生产实习心得体会
2016/01/22 职场文书