web-dev-qa-db-ja.com

DataTablesで日付範囲をフィルタリングするにはどうすればよいですか？

乗車情報を含む大きなdataTableがあります。すべての行には、次の形式の開始日時と終了日時があります（yyyy-mm-dd HH：mm：ss）。日付ピッカーを使用してdataTablesのフィルター範囲を設定するにはどうすればよいですか？日付ではなく、日付のみを選択し、時刻は選択しない日付ピッカーが必要です。私はどこでも適切な答えを探しましたが、見つけることができませんでした。助けてくれてありがとう。

たとえば、（01-07-2016-31-07-2016）を選択して、7月のすべての行を表示します。

javascriptdatetimefilterdatatables
16
Novy

DataTableは、単一のDatePickerが "from"日付フィルターとして使用されます

LiveDemo

DateRange（ToおよびFrom）フィルター用のDataTableが2つあるDatePickersは次のとおりです。

LiveDemo

31
mmushtaq

ここに私のソリューションがあります datatables docs の範囲フィルターの例からまとめて、 moment.js に日付の比較という汚い仕事をさせます。

HTML

<input 
    type="text" 
    id="min-date"
    class="date-range-filter"
    placeholder="From: yyyy-mm-dd">

<input 
    type="text" 
    id="max-date" 
    class="date-range-filter"
    placeholder="To: yyyy-mm-dd">

<table id="my-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Created At</th>
        </tr>
    </thead>
</table>

JS

インストールの瞬間：npm install moment

// Assign moment to global namespace
window.moment = require('moment');

// Set up your table
table = $('#my-table').DataTable({
    // ... do your thing here.
});

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

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

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

JSFiddle Here

ノート

  • モーメントを使用すると、日付比較ロジックが分離され、さまざまな形式での作業が簡単になります。私のテーブルでは、yyyy-mm-ddを使用しましたが、mm/dd/yyyyも使用できます。使用するメソッドを変更する必要がある場合があるため、必ず 他の形式を解析するときのドキュメント を参照してください。
6
CJ Edgerton

次の1つはjs 2.10以上のモーメントで正常に動作しています

$.fn.dataTableExt.afnFiltering.Push(
        function( settings, data, dataIndex ) {
            var min  = $('#min-date').val()
            var max  = $('#max-date').val()
            var createdAt = data[0] || 0; // Our date column in the table
            //createdAt=createdAt.split(" ");
            var startDate   = moment(min, "DD/MM/YYYY");
            var endDate     = moment(max, "DD/MM/YYYY");
            var diffDate = moment(createdAt, "DD/MM/YYYY");
            //console.log(startDate);
            if (
              (min == "" || max == "") ||
              (diffDate.isBetween(startDate, endDate))


            ) {  return true;  }
            return false;

        }
    );
1
Jothi Kannan
 $.fn.dataTable.ext.search.Push(
    function (settings, data, dataIndex) {
        var FilterStart = $('#filter_From').val();
        var FilterEnd = $('#filter_To').val();
        var DataTableStart = data[4].trim();
        var DataTableEnd = data[5].trim();
        if (FilterStart == '' || FilterEnd == '') {
            return true;
        }
        if (DataTableStart >= FilterStart && DataTableEnd <= FilterEnd)
        {
            return true;
        }
        else {
            return false;
        }
        
    });
    --------------------------
 $('#filter_From').change(function (e) {
        Table.draw();

    });
    $('#filter_To').change(function (e) {
          Table.draw();

    });
1
FarhadRahimi

ここに私の解決策がありますが、momemt.jsを使用する方法はありません。ここに、DateRange（ToおよびFrom）フィルター用の2つのDatePickerを持つDataTableがあります。

       $.fn.dataTable.ext.search.Push(
          function (settings, data, dataIndex) {
        var min = $('#min').datepicker("getDate");
        var max = $('#max').datepicker("getDate");
        var startDate = new Date(data[4]);
        if (min == null && max == null) { return true; }
        if (min == null && startDate <= max) { return true;}
        if(max == null && startDate >= min) {return true;}
        if (startDate <= max && startDate >= min) { return true; }
        return false;
    }
0
Jomal Johny

以下のリンクをたどり、必要なものに設定します。 Daterangepickerは非常に簡単にそれを行います。 :)

http://www.daterangepicker.com/#ex1

0
user5686312