layui的laydate.render()多次渲染的问题

最新推荐文章于 2024-10-14 14:52:56 发布

原创最新推荐文章于 2024-10-14 14:52:56 发布 · 2.8w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#layui

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种根据用户选择的“上午”或“下午”时间范围，动态调整可选时间的网页表单组件实现方法。通过移除并重新加载laydate组件，实现了上午与下午不同时间段的选择限制。

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

描述：根据“上午”、“下午”的不同选择，限制可选时间的组件显示不同内容

<div class="main-head">
        <p><span>在线预定</span></p>
    </div>
    <div class="main-reserve">
        <form action="#" method="post" id="food-reserve" class="layui-form">
            <ul>
                <li>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="modules" lay-verify="required" onchange="selectFood()" lay-search="">
                            <option value="0" selected>请选择时间范围</option>
                            <option value="1">上午</option>
                            <option value="2">下午</option>
                        </select>
                    </div>
                </div></li>
                
                <li>
                        <label class="layui-form-label">时间</label>
                        <div class="layui-input-inline" id="timeInput">
                            <input type="text" class="layui-input" id="test-limit3" name="time" autocomplete="off">
                        </div>
                </li>
            </ul>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>
    </div>

laydate.render()只会渲染一次，若要多次渲染，可以移除元素，重新加载

<script>
    var form;
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        
        form.on('select', function(data){
            //获取被选中的option标签
            var flag = data.value;
            if (flag == 1) {
            /* 移除元素，重新加载 */
                $("#test-limit3").remove();
                $("#timeInput").html('<input type="text" class="layui-input" id="test-limit3" name="time" autocomplete="off">');
                //限定可选时间
                laydate.render({
                    elem: '#test-limit3'
                    ,type: 'time'
                    ,min: '10:30:00'
                    ,max: '12:00:00'
                    ,btns: ['clear', 'confirm']
                });
            } else if (flag == 2){
                $("#test-limit3").remove();
                $("#timeInput").html('<input type="text" class="layui-input" id="test-limit3" name="time" autocomplete="off">');
                //限定可选时间
                laydate.render({
                    elem: '#test-limit3'
                    ,type: 'time'
                    ,min: '14:00:00'
                    ,max: '22:00:00'
                    ,btns: ['clear', 'confirm']
                });
            } else {
                alert("请选择时间范围");
            }
        })；
    });

</script>