layui 时间控件 laydate 的使用

最新推荐文章于 2025-09-24 11:35:07 发布

转载最新推荐文章于 2025-09-24 11:35:07 发布 · 1.1k 阅读

web 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍如何在网页中使用layui框架的时间控件laydate，包括下载jQuery和layui，页面引用，HTML输入框创建及JS初始化laydate实例，实现年、月、日的选择。

1.下载jquery、下载layui相关js/css

2.页面中引用相关文件

3.html中使用input创建时间控件

4.js中初始化laydate实例

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
</head>

<body >
<div>
    <!-- display:inline 在引用class之后重写样式，同行显示控件 -->
    <input type="text" placeholder="yyyy" class="layui-input" style="width: 250px;display:inline;margin-left:15px;" id="laydate_year">
    <input type="text" placeholder="yyyy-MM" class="layui-input" style="width: 250px;display:inline;margin-left:15px;" id="laydate_month">
    <input type="text" placeholder="yyyy-MM-dd" class="layui-input" style="width: 250px;display:inline;margin-left:15px;" id="laydate_day">
</div>

<script>
    layui.use(['laydate'], function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#laydate_day', //指定元素
            done:function(value,date){//value, date, endDate点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                if(value.length == 10){
                    alert(value);//默认加载当日数据
                }
            }
        });
        //年选择器
        laydate.render({
            elem: '#laydate_year'
            ,type: 'year', //指定元素
            done:function(value,date){//value, date, endDate点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                if(value.length == 4){
                    alert(value);//默认加载当日数据
                }
            }
        });
        //年月选择器
        laydate.render({
            elem: '#laydate_month'
            ,type: 'month', //指定元素
            done:function(value,date){//value, date, endDate点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                if(value.length == 7){
                    alert(value);//默认加载当日数据
                }
            }
        });

        
    });
</script>
</body>
</html>