解决在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 相关文章推荐
jQuery 中关于CSS操作部分使用说明
Jun 10 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 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
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
Python 获取项目根路径的代码
2019/09/27 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
质检员的岗位职责
2013/11/15 职场文书
会计专业应届生求职信
2013/11/24 职场文书
大学生表扬信范文
2014/01/09 职场文书
法制报告会主持词
2014/04/02 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS