解决在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")即可，惊喜的发现真的可以，效果如下：

效果是实现了，可是顶部的[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失败的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决layer.open后laydate失效的问题

    如果你的open方式是1(html)的话这样是可以的, 如果是2(iframe)方式打开,你把注入的代码写在打开的界面就可以了不用这样写,open的参数type是有区别的,所以请注意: 今天在开发项目时候使用到了laydate,按照官方文档说明使用发现出现下面的问题: 1.在正常页面中使用laydate组件没有问题,点击可以正常显示出来 2.但是在layer.open打开一个窗体后就没有效果了 分析思路:由于页面的加载如果js在页面元素显示之前就执行,那么就会出现无法渲染组件的问题,所有决定等元

  • 解决在layer.open中使用时间控件laydate失败的问题

    今天有个需要,用户进入页面的时候,弹出一个弹窗,弹窗中选择一个时间,弹窗大概是这样的: 我的思路是,先在页面写好弹窗内容,然后使用lay.open设置content即可: <div id="layopen"> 时间:<input type="text" id="time"></input> </div> layer.open({ content: $("#layout").htm

  • 解决ant design vue中树形控件defaultExpandAll设置无效的问题

    页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe

  • Android线程中设置控件的值提示报错的解决方法

    本文实例讲述了Android线程中设置控件的值提示报错的解决方法.分享给大家供大家参考,具体如下: 在Android线程中设置控件的值一般会与Handler联合使用,如下: package com.yarin.android.Examples_04_15; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import andro

  • 解决iView中时间控件选择的时间总是少一天的问题

    今天在用iview做前端页面开发的时候,遇到一个奇葩问题(也许自己主要做后台开发,当时我还纳闷了),我在时间控件中明明选择的是2017-10-19,但是当通过vue的调试器查看的时候,竟然是这样的,如下图: 当时我还纳闷了,这iview的时间控件真神奇,我还百度谷歌了好半天,后来查看官方文档,是我获取时间的方式不是很对,我当时用的是l来v-mode绑定的,这样绑定后获取的时间好像叫utc时间,如果要想获取正确的时间,通过@on-change事件来绑定即可,(注意,用@on-change来获取时间

  • VS2010中呈现控件时出错的解决方法

    在制作控件的时候容易遇到"呈现控件时出错""发生了未处理的异常.未将对象引用设置到对象的实例."这样的错误,如下图:(也有可能仅仅只是因为未设置runat="server"标签而导致该错误,请先检查该项.) 但是在编译时/运行时也都是没有错误的. 分析 如图所示的情况我们称之为"设计时"以区别于"编译时"/"运行时". 设计时:在ASP.NET环境中也就是当我们在Visual Studi

  • 灵活掌握asp.net中gridview控件的多种使用方法（下）

    灵活掌握asp.net中gridview控件的多种使用方法（下）

    继续上篇文章的学习<灵活掌握asp.net中gridview控件的多种使用方法(上)>,在此基础上巩固gridview控件的操作使用,更上一层楼. 11.GridView实现用"..."代替超长字符串: 效果图: 解决方法:数据绑定后过滤每一行即可 for (int i = 0; i <= GridView1.Rows.Count - 1; i++) { DataRowView mydrv; string gIntro; if (GridView1.PageIndex

  • 深入分析C#中WinForm控件之Dock顺序调整的详解

    最近被.net winform中的控件布局搞困惑了,由于控件都是使用Dock方式的,操作起来也是比较方便,如果最大化,窗口大小调整等,都可以随着窗口大小的变化而变化.但问题是,.net winform的dock方式是根据先添加的控件顺序进行优先级Dock排列的,假设我想目前有三个控件A.B.C分别以 Top.Bottom以及Fill方式填充窗口即窗口看起来应该是这样的:---------------------A---------------------C--------------------

  • 灵活掌握asp.net中gridview控件的多种使用方法（上）

    灵活掌握asp.net中gridview控件的多种使用方法（上）

    灵活使用asp.net中gridview控件的方法有很多种,本文内容很富,希望大家都能有所收获. 1.GridView无代码分页排序: 效果图: 小提示: 1.AllowSorting设为True,aspx代码中是AllowSorting="True": 2.默认1页10条,如果要修改每页条数,修改PageSize即可,在aspx代码中是PageSize="12". 3.默认的是单向排序的,右击GridView弹出"属性",选择AllowSort

  • Android开发中include控件用法分析

    Android开发中include控件用法分析

    本文实例讲述了Android开发中include控件用法.分享给大家供大家参考,具体如下: 我们知道,基于Android系统的应用程序的开发,界面设计是非常重要的,它关系着用户体验的好坏.一个好的界面设计,不是用一个xml布局就可以搞定的.当一个activity中的控件非常多的时候,所有的布局文件都放在一个xml文件中,很容易想象那是多么糟糕的事情!笔者通过自身的经历,用include控件来解决这个问题,下面是一个小例子,仅仅实现的是布局,没有响应代码的设计. user.xml文件内容如下: <

  • C# wpf Canvas中实现控件拖动调整大小的示例

    C# wpf Canvas中实现控件拖动调整大小的示例

    目录 前言 一.功能说明 二.如何实现? 1.继承Adorner 2.使用Thumb 3.实现拖动逻辑 三.完整代码 四.使用示例 总结 前言 我们做图片编辑工具.视频编辑工具.或者画板有时需要实现控件缩放功能,比如图片或图形可以拉伸放大或缩小,实现这种功能通常需要8个点,对应4条边和4个角,在wpf中通常可以使用装饰器实现. 一.功能说明 8个点方放置在控件的8个方位上,通过拖动这些点对控件进行拉伸或缩小,示意图如下: 二.如何实现? 1.继承Adorner 通过装饰器的方式添加8个点在控件上

随机推荐