一、 日期搜索：
<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， 会有选择日期时 闪烁消失的现象：
添加属性：
trigger: 'click',即可。。。