laydate限定时间控件去除秒

layDate

layDate 是 layui 独立维护的三大组件之一（即该版本可独立使用，无需采用 layui，内部采用的是零依赖的原生 JavaScript 编写），最早发布于 2014 年 6 月，但当时只迭代了一个版本，就再也没有更新。而现在，我们对其进行了一次全面的重写，并将 5.0 作为其版本的新纪元。

本文介绍：laydate限定时间控件去除秒

css控件样式修改

<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>

html

<input type="text" class="form-control date" id="time" value=""
           placeholder="请选择起床时间">

js

<script>
		
        // 限定可选时间
        layui.use("laydate", function() {
            var laydate = layui.laydate;
            //限定可选时间5-23点范围内
            laydate.render({
                elem: '#time'
                ,type: 'time'
                ,min: '05:00:00'
                ,max: '23:00:00'
                ,btns: ['clear', 'confirm']
                ,trigger: "click"
                ,format: 'HH:mm' // 时间格式
                ,ready: formatminutes
            });
        });
        // 分只保留0 10 20 30 40 50
        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();  //清空秒
        }
	</script>

效果