layui的日期和时间组件 - laydate

Ŀ¼

最近在用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

标签

laydate