首页Layui 一个时间选择框选择多个时间

Layui 一个时间选择框选择多个时间

时间: 2023-08-30 14:09:28 浏览: 146

Layui提供了一个时间选择器组件laydate，在该组件中可以选择多个时间。使用方式如下： 1. 在html文件中引入layui.js和laydate.js文件。 ```html <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/lay/modules/laydate.js"></script> ``` 2. 在需要使用的地方创建一个input标签，并设置id属性。 ```html <input type="text" class="layui-input" id="test" placeholder="请选择时间范围"> ``` 3. 在js文件中初始化laydate组件，并设置其属性。 ```javascript //执行一个laydate实例 laydate.render({ elem: '#test', type: 'datetime', range: true //开启多个日期选择 }); ``` 其中，elem属性指定需要绑定laydate的input元素，type属性指定时间选择器的类型（可选值为year、month、date、time、datetime），range属性开启多个时间选择。完整代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui时间选择器选择多个时间</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> </head> <body> <div class="layui-form-item"> <label class="layui-form-label">时间范围选择</label> <div class="layui-input-block"> <input type="text" class="layui-input" id="test" placeholder="请选择时间范围"> </div> </div> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/lay/modules/laydate.js"></script> <script> //执行一个laydate实例 laydate.render({ elem: '#test', type: 'datetime', range: true //开启多个日期选择 }); </script> </body> </html> ```

阅读全文