一、 日期搜索:
若在当前页的搜索:
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;
}
}
});
}
二、单日期选择:
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',
即可。。。