Question

我有一个数据表，两个字段的开始和结束日期以及一个搜索按钮，我想在数据表中显示出生日期在开始日期和开始日期之间的雇员。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" />

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
<meta charset="UTF-8" />


<div class="form-group col-md-4 offset-4">
    <label>start date</label>
    <input type="date" id="datePicker" class="form-control">
        <label>end date</label>
        <input type="date" id="datePicker1" class="form-control">
        </div>
        <div class="form-group offset-5">
            <button class="btn btn-success " id="hide">search</button>
        </div>

        <table id="example" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>date of birth</th>
                    <th>name</th>
                    <th>email</th>
                    <th> adress</th>
                    <th>salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>22/09/1988</td>
                    <td>ali</td>
                    <td>ouvrage1@hotmail.com</td>
                    <td>italie</td>
                    <td>6000</td>
                </tr>
                <tr>
                    <td>02/11/2002</td>
                    <td>zalir</td>
                    <td>ouvrage2gmail.com</td>
                    <td>france</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>05/06/2019</td>
                    <td>kamil</td>
                    <td>ouvrage3@msn.com</td>
                    <td>alm</td>
                    <td>7000</td>
                </tr>
            </tbody>
        </table>

jquery代码

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

<script>
    $(document).ready( function() {
    $('#example').DataTable();

    var now = new Date();
    var day = ("0" + now.getDate()).slice(-2);
    var month = ("0" + (now.getMonth() + 1)).slice(-2);
    var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
    $('#datePicker').val(today);
    $('#datePicker1').val(today);
    });

    $("#hide").click(function(){
    });
</script>

Answer 1

您可以使用momentjs比较日期来创建扩展范围。

table = $('#example').DataTable({
  paging: false,
  info: false
});

// Extend dataTables search
$.fn.dataTable.ext.search.push(
  function(settings, data, dataIndex) {
    var min = $('#datePicker').val();
    var max = $('#datePicker1').val();
    var birthday = data[0] || 0; // Our date column in the table

    if (
      (min == "" || max == "") ||
      (moment(birthday).isSameOrAfter(min) && moment(birthday).isSameOrBefore(max))
    ) {
      return true;
    }
    return false;
  }
);

// Re-draw the table when the a date range filter changes
$('.date-range').change(function() {
  table.draw();
});

https://jsfiddle.net/viethien/rqmk6x3w/2/

在jQuery中搜索日期之间？

1 个答案: