Ŀ¼
最近在用layui开发后台,在使用layui提供的时间插件时,发现控制台报错:laydate.renderis not a function,当时就很费解,仔细阅读官方文档用法,结果还是不行,又在官网重新下载的js,但是依然报错,最后找到问题所在是版本的问题：layui有两个版本，一个是1.0版的js，一个是2.0版的js，其中render是2.0的，之前引用的js是1.0，所以就会报错。以下保留了两种显示的方法，做个总结，希望能够给人提供帮助。
- 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>
- 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.2 debug
现在layui有两个版本，一个是1.0版的js，一个是2.0版的js，其中render是2.0的，之前引用的js是1.0，所以就会报错
- 日期和时间组件文档 - layui.laydate： http://www.layui.com/doc/modules/laydate.html
- layui 下载（官方给的下载地址） https://github.com/sentsin/layui/
文章来源: layui的日期和时间组件 - laydate