00020layui-日期控件的使用封装

49次阅读

共计 2951 个字符，预计需要花费 8 分钟才能阅读完成。

一、日期搜索：

<div class="layui-inline layui-inline-31">
   <label class="layui-form-label"> 创建时间 </label>
   <div class="layui-input-block">
      <input type="text" class="layui-input" id="createTime-laydate-range" autocomplete="off" placeholder="-">
      <input type="hidden" name="createTimeStart">
      <input type="hidden" name="createTimeEnd">
   </div>
</div>

若在当前页的搜索：

admin.renderDateForSearch("createTime")

若是呼出页面的搜索：

var search_field = { };
top.layui.admin.popupRight({
              id: 'LAY_workTaskLogPopupLayer'
              ,area: '350px'
              ,success: function(layero,index){top.layui.view(this.id).render('task/workTaskLogSearch',$.extend(search_field,{
                      logTypeArr:logTypeArr,
                      statusArr:statusArr,
})).done(function () {top.layui.form.render();
                          admin.renderDateForSearch("createTime",search_field);
                      }
                  );
              }
          });

自定义封装方法：admin.renderDateForSearch：

/**
 * 用于日期范围的搜索
 * cjianquan 2020/3/19
 * @param name 搜索的表单值名称，即对应后台 Bean 的属性
 * @param search_field 搜索字段
 * @param type 日期类型
 */
admin.renderDateForSearch = function(name,search_field,type){
    var val = '';
    type = type?type:'date';
    if(search_field && search_field[name+"Start"] && search_field[name+"End"]){val+=search_field[name+"Start"]+"~"+search_field[name+"End"];
    }
    var layui_laydate = search_field?top.layui.laydate:layui.laydate;
    var layui$ = search_field?top.layui.$:layui.$;
    layui_laydate.render({
        elem: '#'+name+'-laydate-range' ,
        type:type,
        trigger: 'click',
        range: '~',
        value:val,
        done: function(value, date, endDate){if(!value){layui$(".layui-form-item [name="+name+"Start]").val(null);
                layui$(".layui-form-item [name="+name+"End]").val(null);
                if(search_field){search_field[name+"Start"] = '';
                    search_field[name+"End"] = '';
                }
                return;
            }
            var dateStr1= value.split("~")[0]
            var dateStr2= value.split("~")[1]
            layui$(".layui-form-item [name="+name+"Start]").val(dateStr1);
            layui$(".layui-form-item [name="+name+"End]").val(dateStr2);
            if(search_field){search_field[name+"Start"] = dateStr1;
                search_field[name+"End"] = dateStr2;
            }

        }
    });
}

二、单日期选择：

<div class="layui-form-item layui-form-item-45" >
   <label class="layui-form-label"> 创建时间 <span style="color:red">*</span></label>
   <div class="layui-input-block">
      <input type="text" class="layui-input" name="createTime" id="createTime-laydate" autocomplete="off" placeholder="">
   </div>
</div>

admin.renderDate("createTime",formData);

自定义封装方法：admin.renderDate

/**
 * 日期选择的封装
 * cjianquan 2020/3/20
 * @param key 日期元素的 ID(前缀)
 * @param formData 表单数据
 * @param type 
 * @param defaultDate 默认日期
 */
admin.renderDate = function (key,formData,type,defaultDate) {
    defaultDate = defaultDate?defaultDate:null;
    type = type?type:'date';
    var format = 'yyyy-MM-dd';
    if(type=='year'){format = 'yyyy';}else if(type=='month'){format = 'yyyy-MM';}else if(type=='time'){format = 'HH:mm:ss';}else if(type=='datetime'){format = 'yyyy-MM-dd HH:mm:ss';}
    format = format?format:'yyyy-MM-dd';
    var date = formData?(formData[key]?formData[key]:defaultDate):defaultDate;
    if(date){var dateStr = layui.util.toDateString(date,format)
        layui.laydate.render({
            elem: '#'+key+'-laydate',
            trigger: 'click',
            type: type,
            value:dateStr
        });
    }else{
        layui.laydate.render({
            elem: '#'+key+'-laydate',
            trigger: 'click',
            type: type,
        });
    }

}

说明：
当同一个页面中，多个 laydate，会有选择日期时闪烁消失的现象：
添加属性：