- 加载js
<script type="text/javascript" src="${ctx}/static/laydate/laydate.js"></script>
可以去https://download.csdn.net/download/weixin_41605586/10867742获取laydate日期控件
- style样式修改
<style type="text/css">
.layui-laydate-content>.layui-laydate-list {
padding-bottom: 0px;
overflow: hidden;
}
.layui-laydate-content>.layui-laydate-list>li{
width:50%
}
.merge-box .scrollbox .merge-list {
padding-bottom: 5px;
}
</style>
- 代码
<input type="text" class="form-control date" id="da" value=""
placeholder="请输入检查时间">
- js
laydate.render({
elem: '#da'
,type: 'time'
,format: 'HH:mm'//保留时分
,btns: ['clear', 'confirm']
,ready: formatminutes
});
function formatminutes(date) {
var aa = $(".laydate-time-list li ol")[1];
var showtime = $($(".laydate-time-list li ol")[1]).find("li");
for (var i = 0; i < showtime.length; i++) {
var t00 = showtime[i].innerText;
if (t00 != "00" && t00 != "20" && t00 != "30" && t00 != "40" && t00 != "50") {
//分进行过滤 只保留0 10 20 30 40 50 一次性显示六十个太多没必要
showtime[i].remove()
}
}
$($(".laydate-time-list li ol")[2]).find("li").remove(); //清空秒
}
- 效果
我这里修改了laydate原来的颜色 因为原来的绿色实在太难看 想改的话去laydate.css里面改很简单就不写了