layui 日期时间控件

最新推荐文章于 2024-08-22 17:29:05 发布

原创最新推荐文章于 2024-08-22 17:29:05 发布 · 1k 阅读

CC 4.0 BY-SA版权

这篇博客介绍了如何在页面中使用layui的日期时间控件。首先，需要从layui官网下载并引入相应的css和js文件。接着展示了页面样式的HTML代码，包括开始时间和结束时间的选择框。然后提供了js示例代码，以及页面实际运行的演示效果。博客以鼓励坚持学习的态度作结。

引入css js

首先我们需要引入layui css js 样式然后自己定义路径引入
下载地址：https://www.layui.com/

1 页面样式

开始时间

 <input type="text" class="layui-input" name="beginDate" id="test1" placeholder="">

结束时间

 <input type="text" class="layui-input" name="endDate" id="test2" placeholder="">

2 js示例

<script>
layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test1',
            type: 'datetime', //精确到时分秒
            min:-31  // 向后31天 ，可以注释
        });
        laydate.render({
            elem: '#test2',
            type: 'datetime', //可以注释 
            max:0 //最大今天
            ,trigger: 'click'//解决一闪而过的问题
            //2020.5.20 记载
        });
    });
</script>