解决在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与C# Windows应用程序交互方法
Jun 29 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
关于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
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python实现聚类算法原理
2018/02/12 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python中entry用法讲解
2020/12/04 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
口头翻译求职人自荐信
2013/12/07 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
闪闪红星观后感
2015/06/08 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书