关于layui时间日期控件，只显示时分问题

最新推荐文章于 2024-01-17 13:26:51 发布

神一般的欧先生

最新推荐文章于 2024-01-17 13:26:51 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：学习

本文链接：https://blog.youkuaiyun.com/ouchangl/article/details/105433338

学习专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用layui框架优化时间选择器，通过自定义JS函数实现时间选择精度到分钟，并去除秒数显示，同时调整了CSS样式以提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

    <div class="layui-form-item">
        <label class="layui-form-label">开始时间</label>
        <div class="layui-input-block">
            <input name="openStart"  lay-verify="required"  class="layui-input" id="open_start" type="text" autocomplete="off">

        </div>
    </div>

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>

js代码

 //日期
            laydate.render({
                elem: '#open_start'
                , trigger: 'click'
                , 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") {
                        showtime[i].remove()
                    }
                }
                $($(".laydate-time-list li ol")[2]).find("li").remove();
            }