laydate控件清空内容

最新推荐文章于 2025-02-21 11:04:59 发布

e企智汇

最新推荐文章于 2025-02-21 11:04:59 发布

阅读量2.1k

点赞数

文章标签： layui.js

本文链接：https://blog.youkuaiyun.com/eqizhihui/article/details/132415037

版权

本文介绍了在使用layui.js的laydate日期选择器时，如何实现选择开始和结束时间并确保结束时间不能早于开始时间。当不满足条件时，将展示提示并清空所选时间。尝试了通过.val()、done回调和手动触发清空按钮，最终解决方案是先清除组件再进行渲染。

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

需求说明：选择开始时间，结束时间（不论先后），判断条件：结束时间不能早于开始时间，如果不符条件则提示弹窗以及清空当前时间

试错过程：

1.使用val()

$(#borrowedEndTime).val('')

2.使用日期选择器的done回调，通过.value赋值

done: function (data) { 
    this.value = data;
    this.elem.val(data)
}

3.手动执行清空按钮

 $('.laydate-btns-clear').click()

最后解决方法：先清除组件再渲染

    initDate('borrowedEndTime')
    function initDate(type) {
        if (type == 'borrowedEndTime') {
            laydate.render({
                elem: '#borrowedEndTime',
                type: 'datetime',
                min: new Date().getTime(),//只能选择当前日期后的时间
                done: function (value, date) {
                    var borrowedStartTime = $("#borrowedStartTime").val()
                    var borrowedEndTime = value
                    if (borrowedStartTime != '' && borrowedEndTime != '') {
                        var dateStart = new Date(borrowedStartTime);
                        var dateEnd = new Date(borrowedEndTime);
                        var num = dateEnd - dateStart;//时间戳之差
                        var borrowDays = num / 1000 / 60 / 60 / 24;
                        if (borrowDays >= 0) {
                            $("#borrowDays").val(parseInt(borrowDays))
                        } else {
                            layer.alert("结束时间不能在开始时间之前")
                            clearDate(type)
                        }
                    }
                }
            });
        }
        
    }
    function clearDate(type){ 
        if (type == 'borrowedEndTime'){
            var parent=$("#borrowedEndTime").parent();
            $("#borrowedEndTime").remove(); //删除开始时间的input元素
            $(parent).append('<input type="text" id="borrowedEndTime" name="borrowedEndTime" required lay-verify="required" placeholder="请选择借阅结束时间" autocomplete="off" class="layui-input">');
            
        }
        initDate(type);
    }