数据表插件 - 选择日期范围

时间:2016-09-28 04:19:20

标签: javascript jquery twitter-bootstrap jquery-ui web-frontend

我找到了一个选择年龄范围的指南,例如:

Html文件:

<table border="0" cellspacing="5" cellpadding="5">
    <tbody>
        <tr>
            <td>Minimum age:</td>
            <td><input type="text" id="min" name="min"></td>
        </tr>
        <tr>
            <td>Maximum age:</td>
            <td><input type="text" id="max" name="max"></td>
        </tr>
    </tbody>
</table>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Date</th>
            <th>Salary</th>
        </tr>
    </thead>
    </tbody>
</table>

Javascript文件:

/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column

        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);

$(document).ready(function() {
    var table = $('#example').DataTable();

    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        table.draw();
    } );
} );

我想要实现的是通过使用bootstrap日历弹出窗口找到最小和最大日期范围。

可以更改行搜索(data[4] ) || 0; // use data for date column

问题是如何搜索日期?  已形成:9/27/2016

我在java脚本中是全新的。

0 个答案:

没有答案