layui 时间刷选查询相关知识点

layui 时间刷选查询结束查询全部时，刷选时间空为空

问题需求：要利用时间段对表格数据进行筛选，当点击查询按钮时，展示相应的数据信息，当点击全部数据时显示全部的表格数据，并把时间段数据清空，防止数据误导

解决方案：利用layui插件进行时间筛选，通过相关逻辑对数据进行筛选，通过控件输入时间段，通过查询按钮响应事件，进行相关逻辑判断，对数据进行筛选，通过查询按钮，把时间段赋值为空即可清除输入时间段，同时展示全部信息。

• 在Html页面引入时间筛选html标签，同时设置相关id

<div>时间筛选：</div>
<li >
    <input type="text"   value="" id="startTime" placeholder="" readonly>
</li>
<li><div style="border: 2px solid #ddd;height: 20px;width: 30px;border-top: none;border-right: none;border-left: none;"></div></li>
<li style="width: 120px;">
    <input type="text" value="" id="endTime"  placeholder="" readonly>
</li>
 <li>
	<button id="showAvgCov">查询</button>
</li>
<li>
	<button id="showAll" >全部</button>
</li>

• 在引入的js通过layui对时间段进行渲染

layui.use('laydate', function(){
    var laydate = layui.laydate;
    laydate.render({
        elem: '#startTime',
        trigger: 'click',
        theme: '#286090',
        btns: ['clear','confirm'],//只出现确定,清空按钮
        format: 'yyyy-MM-dd', //可任意组合
    });
    laydate.render({
        elem: '#rendTime',
        trigger: 'click',
        theme: '#286090',
        btns: ['clear','confirm'],//只出现确定,清空按钮
        format: 'yyyy-MM-dd', //可任意组合
    });
})

• 写时间段查询按钮的响应事件，其中对时间进行比较需要将时间转化为时间戳，然后对时间直接进行比较大小

$('#round_showAvgCov').on('click',function () {
    var selectData =[];
    let endTime = $('#endTime').val();
    let startTime = $('#startTime').val();
    let date1_s=startTime.replace(/\-/g,'/');   //利用正则将字符串格式转换统一标准格式 date1_s输出：2016/8/23.
    let date2_s=endTime.replace(/\-/g,'/') ;
    let date1_unix=Date.parse(date1_s); //將字符串格式日期转化为时间戳，就是1970年到当前日期的毫秒数
    let date2_unix=Date.parse(date2_s); //將字符串格式日期转化为时间戳，就是1970年到当前日期的毫秒数
    if (data.length > 0 && data != undefined){
        for (let j=0;j<data.length;j++){
            var current_time = data[j]['createTime'].split(" ")[0];
            // alert(current_time);
            let date3_s = current_time.replace(/\-/g,'/');
            let date3_unix = Date.parse(date3_s);
            // alert(date3_unix)
            if (date3_unix>=date1_unix&&date3_unix<=date2_unix){
                selectData.push(data[j]);
            }
        }
        inittable_real_project(selectData)；//加载数据到表格
    if(startTime == ""  || endTime == "" ) {
        layer.alert("请确认已选择开始时间和结束时间!");
        return false;
    }

    let date1 = new Date(endTime);
    let date2 = new Date(startTime);
    if(date1 < date2){
        layer.alert("结束时间大于开始时间!请重新选择");
        return false;
    }
});

• 点击全部查询的响应事件，在点击全部时，对时间段里面的值赋值为空即可做到点击全部按钮时，时间段选择为空。

$('#round_showAll').on('click',function () {
    $('#endTime').val("");
    $('#startTime').val("");
    inittable_real_project(data)；//加载表格数据
});