页面时间回显&时间控件——前端layui

最新推荐文章于 2022-10-27 14:06:05 发布

原创最新推荐文章于 2022-10-27 14:06:05 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui

前端专栏收录该内容

69 篇文章

订阅专栏

本文介绍了在前端使用layui框架实现页面时间回显和时间控件的功能。通过html和js代码展示了两种引入时间插件的方法，包括调用base.js文件中的initData方法和layui的原生写法。

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

html:

getDataByServiceURL(url_promotion, 'api/coupon/findCouponById', {id: id}, function (data) {
        if (data.code === 0) {
			//页面渲染
            if(data.data.active == "0"){
                thisRender($('#conponEditTemplate').html(), $('#conponEditView'), data.data);
            }else{
                thisRender($('#conponReadTemplate').html(), $('#conponEditView'), data.data);
            }
            

            //  初始化时间第1种方法——该方法需要用base.js文件的方法
            var effectiveStartTime = initData('effectiveStartTime','datetime');
            var effectiveEndTime = initData('effectiveEndTime','datetime');
            
            //  初始化时间第2种方法
            // 生效时间范围
            // laydate.render({
            //      elem: '#effectiveStartTime',
            //      type: 'datetime',
            //     //  calendar: true
            // });
        
            // // 失效时间范围
            // laydate.render({
            //     elem: '#effectiveEndTime',
            //     type: 'datetime',
            //     // calendar: true
            // });

        } else {
            layer.msg(data.msg, {icon: 5});
        }
});

js中有两种引入时间插件的方法，一个是调用base.js文件写好的initData方法，该方法如下：

/**
 * 初始化时间控件
 * 
 * @param elementId
 *            时间控件ID
 * @param type
 *            时间控件类型选择:year/month/date(默认)/time/datetime
 * 
 */
function initData(elementId, type) {
    var _this;
    layui.use(['laydate'], function () {
        var laydate = layui.laydate;
        if (!type) {
            type = 'date';
        }
        _this = laydate.render({
            elem: '#' + elementId, // 指定元素
            type: type,
            calendar: true,
        });
    });
    return _this;
}

第二种是layui的原生写法