layui Datepicker的使用

原创已于 2023-03-22 21:26:48 修改 · 284 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端

于 2023-03-22 21:25:49 首次发布

该HTML代码示例展示了如何在网页中集成layui库，通过laydate模块为输入框添加时间选择功能。页面引用了layui的CSS和JS文件，并使用jQuery进行DOM操作，当页面加载完成后，为class为stime的输入框添加点击触发的时间选择器。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>

  <!-- 引入 layui.css -->
<link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css">
 
<!-- 引入 layui.js -->
<script src="https://unpkg.com/layui@2.6.8/dist/layui.js" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
 </head>

 <body>

  <div>
   <input type="text" class="stime" id="test1">
  </div>

  <script>
    window.onload = function(){
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            $('.stime').each(function () {
                laydate.render({
                    elem: this,
                    trigger: 'click',
                    theme: '#1C84C6',
                });
             });

        });
    }
  </script>

 </body>
</html>