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

Posted 2020-12-24

一、 日期搜索：

<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‘,

即可。。。