解决在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.buildFragment使用方法及思路分析
Jan 07 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
微信小程序实现日历功能
Nov 27 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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
phpstrom使用xdebug配置方法
2013/12/17 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
angularjs下拉框空白的解决办法
2017/06/20 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
人力资源管理专业学生自我评价
2013/11/20 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
Python绘画好看的星空图
2022/03/17 Python
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
Java对文件的读写操作方法
2022/04/29 Java/Android