解决在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页面滚动浮动层智能定位实例代码
Aug 23 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
JavaScript基础心法 数据类型
2018/03/05 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Python中单例模式总结
2018/02/20 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python之语音识别speech模块
2020/09/09 Python
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
学前教育毕业生自荐信范文
2013/12/24 职场文书
小学语文复习计划
2015/01/19 职场文书
简历自我评价模板
2015/03/11 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
SQL写法--行行比较
2021/08/23 SQL Server