发表于2022-1-18号
页面:
<input type="text" id="cycle_time" name="cycle_time" placeholder="HH:mm" autocomplete="off" class="layui-input" style="width: 100px">
添加依赖
layui.use(['form', 'table', 'laydate', 'element'], function () { var $ = layui.jquery, form = layui.form, table = layui.table, laydate = layui.laydate;
//时间选择器
laydate.render({ elem: '#cycle_time' , type: 'time' , format: 'HH:mm' });
});
网上找的都是效果图:
小时和分钟都没有对齐,经过研究,做了一些调整,现在小时和分钟都是对齐的
效果图:
在当前页面添加一些样式:
.layui-laydate-content>.layui-laydate-list { padding-bottom: 0px; overflow: hidden; } .layui-laydate-content>.layui-laydate-list>li{ width:50%; } .laydate-time-list ol li{ padding-left:54px; }