layui的日期和时间组件 - laydate

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Majker/article/details/80807355

目录

---

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