解决在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 相关文章推荐
JS.findElementById()使用介绍
Sep 21 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
在Python程序中操作MySQL的基本方法
2015/07/29 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
什么是Python变量作用域
2020/06/03 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
python自动化办公操作PPT的实现
2021/02/05 Python
python lambda的使用详解
2021/02/26 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
中文专业毕业生自荐信
2013/10/28 职场文书
应届生人事助理求职信
2013/11/09 职场文书
教师党员一句话承诺
2014/03/28 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
北京天坛导游词
2015/02/12 职场文书
2015国庆节宣传语
2015/07/14 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python