欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-04-22 19:05:13
...

一、未调用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' //采用鼠标点击弹出
});

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

设置定位方式有三种：Layui的日期时间控件错误问题解决

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

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

相关标签： Layui Layui日期控件 Layui日期控件错误 Layui日期控件未弹出 laydate实例

上一篇： 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作

下一篇： Layui 时间控件 闪退问题解决

推荐阅读