解决在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图片上传前的本地预览实例
Jun 16 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 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 字符串函数收集
2010/03/29 PHP
js 链式延迟执行DOME
2012/01/04 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
JQuery球队选择实例
2015/05/18 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
班组长的岗位职责
2013/12/09 职场文书
小摄影师教学反思
2014/04/27 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
公开承诺书格式
2014/05/21 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
青年文明号申报材料
2014/12/23 职场文书
感谢信怎么写
2015/01/21 职场文书
小学思想品德教学反思
2016/02/24 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
Html5生成验证码的示例代码
2021/05/10 Javascript
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server