一、Layui时间选择器图标
在Layui时间选择器中，用户可以通过选择图标来触发时间选择器弹窗。可以通过下面的代码来实现一个Layui时间选择器图标。
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test1" placeholder="请选择时间">
</div>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#test1', //指定元素
showBottom: false //不显示底部按钮
});
});
</script>
以上代码会自动生成一个默认的图标，并且用户可以通过点击图标来弹出时间选择器，并选择预期的时间。
二、Layui时间选择器选择时分秒
在实际应用中，用户可能需要对时间进行时分秒的选择。Layui时间选择器也提供了这样的功能，可以通过下面的代码来实现。
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test2" placeholder="请选择时间">
</div>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#test2', //指定元素
type: 'time', //指定时间类型为时分秒
format: 'HH:mm:ss', //指定时间格式
showBottom: false //不显示底部按钮
});
});
</script>
以上代码会生成一个可供用户选择时分秒的时间选择器。
三、Layui时间选择器范围选取
有时候，用户可能需要选择一段时间范围，此时可以使用Layui时间选择器的范围选择功能。下面的代码演示了如何实现。
<div class="layui-inline">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test3-1" placeholder="请选择开始时间">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束时间</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test3-2" placeholder="请选择结束时间">
</div>
</div>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#test3-1', //指定开始时间元素
type: 'datetime', //指定时间类型为日期时间
format: 'yyyy年MM月dd日 HH:mm:ss', //指定时间格式
theme: 'molv', //指定颜色主题
min: '2010-01-01 00:00:00', //开始时间最小值
max: '2022-12-31 23:59:59', //开始时间最大值
btns: ['clear', 'confirm'], //指定底部按钮
done: function(value, date){ //选择完成回调函数
end.max = value; //设置结束时间的最大值
}
});
var end = laydate.render({
elem: '#test3-2', //指定结束时间元素
type: 'datetime', //指定时间类型为日期时间
format: 'yyyy年MM月dd日 HH:mm:ss', //指定时间格式
theme: 'molv', //指定颜色主题
btns: ['clear', 'confirm'], //指定底部按钮
done: function(value, date){ //选择完成回调函数
start.min = value; //设置开始时间的最小值
}
});
var start = laydate.render({
elem: '#test3-1', //绑定开始时间元素
type: 'datetime', //指定时间类型为日期时间
format: 'yyyy年MM月dd日 HH:mm:ss', //指定时间格式
theme: 'molv', //指定颜色主题
btns: ['clear', 'confirm'], //指定底部按钮
done: function(value, date){ //选择时间完成回调函数
end.min = value; //设置结束时间的最小值
end.value = ""; //清空结束时间的值
}
});
});
</script>
以上代码将生成两个可供用户选择的时间输入框，用户可以通过选择开始时间和结束时间来选择一段时间范围。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/195607.html
微信扫一扫 
支付宝扫一扫 