解决在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 相关文章推荐
js option删除代码集合
Nov 12 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
React Native项目框架搭建的一些心得体会
May 28 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
php2html php生成静态页函数
2008/12/08 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
在python中安装basemap的教程
2018/09/20 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
详解python中*号的用法
2019/10/21 Python
师范毕业生个人求职信
2013/12/09 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2015年班组长工作总结
2015/04/10 职场文书
法律意见书范文
2015/05/20 职场文书
远程教育学习心得体会
2016/01/23 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
Ajax实现异步加载数据
2021/11/17 Javascript
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
redis lua限流算法实现示例
2022/07/15 Redis