解决在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的public、private和privileged模式
Dec 28 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
原生js编写2048小游戏
Mar 17 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
vue之数据交互实例代码
Jun 20 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
微信小程序实现搜索功能
Mar 10 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
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python字符串替换示例
2014/04/24 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
人机交互程序 python实现人机对话
2017/11/14 Python
python内置数据类型之列表操作
2018/11/12 Python
python实现微信防撤回神器
2019/04/29 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
类的返射机制中的包及核心类
2016/09/12 面试题
会计顶岗实习心得
2014/01/25 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
地道战观后感400字
2015/06/04 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书