解决在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 相关文章推荐
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
javascript中的with语句学习笔记及用法
Feb 17 Javascript
关于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
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
jquery 选择器部分整理
2009/10/28 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
详解vue-router基本使用
2017/04/18 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
浅谈numpy库的常用基本操作方法
2018/01/09 Python
Python单元测试实例详解
2018/05/25 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
10个示例带你掌握python中的元组
2020/11/23 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
Hotels.com越南:酒店预订
2019/10/29 全球购物
表彰先进集体通报
2014/01/12 职场文书
竞聘上岗演讲
2014/05/19 职场文书
节能环保标语
2014/06/12 职场文书
党建目标管理责任书
2014/07/25 职场文书
2014年护士长工作总结
2014/11/11 职场文书
学期个人自我总结
2015/02/13 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle