layui时间回显问题解决

最新推荐文章于 2025-06-18 15:09:18 发布

原创最新推荐文章于 2025-06-18 15:09:18 发布 · 7.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui时间回显问题解决

web前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了解决layui日期选择器在编辑模式下无法正确回显已有日期的问题。通过使用laydate.render方法并传入正确的日期值，可以实现对开始时间和结束时间的准确回显。

当我们请求接口时将得到的数据进行回显 layui一直是获取了当前的系统时间进行回显
解决办法

 layui.config({
        base: './Public/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use('index');
    layui.use(['laydate','form','table'], function(){
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;
        //监听行工具事件
        table.on('tool(test)', function(obj) {
            var d = obj.data;
            var c = d.type_title;
            console.log(c);
            form.val("formTest", {
                "edit_type_title": c
            });

               var r = d.str_time;
            try {
                laydate.render({
                    elem: '#start',
                    value: new Date(r) //参数即为：2018-07-20 00:00:00 的时间戳
                });
            } catch(e) {
                $("#start").val(r); //开始时间
            }
            var e = d.end_time;
            try {
                laydate.render({
                    elem: '#end',
                    value: new Date(e) //参数即为：2018-08-20 00:00:00 的时间戳
                });
            } catch(e) {
                $("#end").val(e); //结束时间
            }

    });


        //常规用法
        laydate.render({
            elem: '#start1'
        });
        //常规用法
        laydate.render({
            elem: '#end1'
        });
        //常规用法
        laydate.render({
            elem: '#start'
        });
        //常规用法
        laydate.render({
            elem: '#end'
        });


    });

这里是该功能进行编辑时出现问题的时候进行解决的