解决在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为iframe的body添加click事件的实现代码
Apr 07 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
php 魔术函数使用说明
2010/02/21 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
如何通过Python实现标签云算法
2019/07/02 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
Django权限控制的使用
2021/01/07 Python
人力资源行政经理自我评价
2013/10/23 职场文书
学生会离职感言
2014/02/11 职场文书
《分一分》教学反思
2014/04/13 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
付款证明模板
2015/06/19 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
vue elementUI批量上传文件
2022/04/26 Vue.js
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android