layui时间选择器通过样式绑定多个input框

html代码

// 需要绑定的input框加入timeRender样式
<input type="text" class="layui-input timeRender"/>

js代码

//渲染layui时间控件(年月日)
function timeRenderDate(){
	lay('.timeRender').each(function() {
		laydate.render({
			elem: this,
			type: 'date',
			trigger: 'click'
		});
	});
	$(".timeRender").removeAttr("lay-key");
}

// 加载时间控件渲染方法
timeRenderDate();
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> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值