目录
最近在用layui开发后台,在使用layui提供的时间插件时,发现控制台报错:laydate.renderis not a function,当时就很费解,仔细阅读官方文档用法,结果还是不行,又在官网重新下载的js,但是依然报错,最后找到问题所在是版本的问题:layui有两个版本,一个是1.0版的js,一个是2.0版的js,其中render是2.0的,之前引用的js是1.0,所以就会报错。以下保留了两种显示的方法,做个总结,希望能够给人提供帮助。
1.单时间
1.1 效果图
1.2 实现代码
- 1.maven配置
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
<type>jar</type>
</dependency>
- 2.springmvc 中静态地址设置,【ctxStatic 】 等价于访问 【项目名\src\main\webapp\static】
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/>
- 3.引用layui插件
<link rel="stylesheet" href="${ctxStatic}/plugin/layui-v2.3.0/layui/css/layui.css" media="all">
<script src="${ctxStatic}/plugin/layui-v2.3.0/layui/layui.all.js"></script>
- 4.输入框,
<div class="col-xs-12 col-sm-6 col-md-2">
<label class="label-item single-overflow pull-left" title="开始时间:">开始时间:</label>
<input class=" form-control" name="startTime" id="startTime" placeholder="开始时间" >
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<label class="label-item single-overflow pull-left time" title="结束时间:">结束时间:</label>
<input class=" form-control" name="endTime" id="endTime" placeholder="结束时间" >
</div>
- 5.添加 点击事件
<script>
$(document).ready(function() {
layui.use('laydate', function(){
var laydates = layui.laydate;
laydates.render({elem: '#startTime', type: 'datetime',format: 'yyyy-MM-dd HH:mm:ss'})
laydates.render({elem: '#endTime', type: 'datetime',format: 'yyyy-MM-dd HH:mm:ss'})
});
});
</script>
2.时间区间
2.1效果图
2.2 实现代码
- 1.maven配置
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
<type>jar</type>
</dependency>
- 2.springmvc 中静态地址设置,【ctxStatic 】 等价于访问 【项目名\src\main\webapp\static】
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/>
- 3.引用layui插件
<link rel="stylesheet" href="${ctxStatic}/plugin/layui-v2.3.0/layui/css/layui.css" media="all">
<script src="${ctxStatic}/plugin/layui-v2.3.0/layui/layui.all.js"></script>
- 4.创建 输入框
<div class="col-xs-12 col-sm-6 col-md-2">
<label class="label-item single-overflow pull-left" title="创建时间:">创建时间:</label>
<input class=" form-control" name="calendar" id="calendar" placeholder="创建时间" >
</div>
- 5.js事件
<script>
$(document).ready(function() {
layui.use('laydate', function(){
var laydates = layui.laydate;
//执行一个laydate实例
laydates.render({
elem: '#calendar', //范围日期选择
range: true,
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss'
});
});
});
</script>
3.Uncaught TypeError: laydate.render is not a function
3.1 BUG截图
3.2 debug
现在layui有两个版本,一个是1.0版的js,一个是2.0版的js,其中render是2.0的,之前引用的js是1.0,所以就会报错
4. 素材
- 日期和时间组件文档 - layui.laydate: http://www.layui.com/doc/modules/laydate.html
- layui 下载(官方给的下载地址) https://github.com/sentsin/layui/