Layui的日期时间控件错误问题解决

最新推荐文章于 2024-08-22 17:29:05 发布

BTBIG@Mr. Chen

最新推荐文章于 2024-08-22 17:29:05 发布

阅读量4.1k

点赞数 1

分类专栏： Layui 文章标签： Layui Layui日期控件 Layui日期控件错误 Layui日期控件未弹出 laydate实例

本文链接：https://blog.csdn.net/qq_37385617/article/details/103993596

版权

Layui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、未调用Layui相关组件

方法一：在Layui模块中使用。下载Layui后，引入本地的layui.css和layui.js即可，调用的时候通过layui.use('laydate', callback)加载模块后，再调用方法
方法二：作为独立组件使用。去 layDate 独立版本官网下载组件包，引入 laydate.js 即可，直接调用方法就可以了。

二、没有正确绑定元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用 layDate 独立版</title>
</head>
<body>
 
<input type="text" id="test1">
 
<script src="laydate.js"></script>
<script>
//执行一个laydate实例
laydate.render({
  elem: '#test1' //绑定元素 根据input的id属性来绑定元素
});
</script>
</body>
</html>

三、未自定义弹出控

//自定义事件
laydate.render({ 
  elem: '#test'
  ,trigger: 'click' //采用鼠标点击弹出
});

四、设置的定位方式不正确

设置定位方式有三种：

定位的方式可能会影响控件的触发，只要把定位删掉就可以了

laydate.render({
  elem: '#test2'
  ,position: 'static'  //删掉此行
});

也可以嵌套在指定容器中

//嵌套在指定容器中
laydate.render({
  elem: '#test2'
  ,position: 'static'
  ,change: function(value, date){ //监听日期被切换
    lay('#testView').html(value);
  }
});

官网链接：https://www.layui.com/doc/modules/laydate.html