2016-03-28 16 views
0

jQuery YADCFプラグインを使用してmm-dd-yyyyの形式の日付列をフィルタリングしています。このプラグインは、日付の間に完全な一致のみを表示する点を除いて、すぐに使えます。その正確な行がテーブルにあれば私には03/06/2016が表示されますが、実際には03/06/2016とそれ以降のすべての日付を表示します。jQuery DataTables yadcfより大きい(日付)

私はこれをDataTablesで手作業でしようとしていますが、「より大きいと等しい」日付検索を行うjQuery DataTablesの実際のバージョンまたは文書化されたバージョンはありません。

誰もYADCF(またはDataTablesソロ)でこれを成功させましたか?

+0

http://datatables.net/examples/plug-ins/range_filtering.html。このリンクには、整数の最小/最大のフィルタリングを行う方法が示されています。最小限の日付フィルタリングを行うようにカスタマイズすることができます。 –

+0

この種のことをするには、常にmoment.jsを使用するファンが大勢います。 – annoyingmouse

+0

range_dateフィルタタイプを使用しましたか?ショーケースhttp://yadcf-showcase.appspot.com/DOM_source.htmlの3列目のフィルターを参照し、カスタム関数(選択)フィルターについて教えてください。選択肢に何らかの値を入力して独自のフィルタロジックを作成できます。第1列のhttp://yadcf-showcase.appspot.com/DOM_source.html – Daniel

答えて

0

ここで私の使用例はYADCFのエッジケースでしたので、私はhttp://codepen.io/markmichon/pen/tmeGDからいくつかのコードを再利用してフィルタを動作させました。私は今回はYADCFを使用しませんでしたが、そこにいることを知るのは素晴らしいことです。私に応えてくれたプラグインの作者、Danielに大声で叫ぶ!!

// converts date strings to a Date object, then normalized into a YYYYMMMDD format (ex: 20131220). Makes comparing dates easier. ex: 20131220 > 20121220 
var normalizeDate = function(dateString) { 
    var date = new Date(dateString); 
    var normalized = date.getFullYear() + '' + (("0" + (date.getMonth() + 1)).slice(-2)) + '' + ("0" + date.getDate()).slice(-2); 
    return normalized; 
} 

var filterByDate = function(column, vesselDate) { 
// Custom filter syntax requires pushing the new filter to the global filter array 
    $.fn.dataTableExt.afnFiltering.push(
     function(oSettings, aData, iDataIndex) { 
      var rowDate = (aData[column]).replace(/<(?:.|\n)*?>/gm, '').match(/[0-9][0-9]\/[0-3][0-9]\/[0-9][0-9][0-9][0-9]/), // take my mm-dd-yyyy – timestamp format wrapped in hTML and strip it down to the mm-dd-yyy only 
      start = normalizeDate(vesselDate); // use a normalized date (see code below) 
      rowDate = normalizeDate(rowDate); 
     // If our date from the row is between the start and end 
     if (start <= rowDate) { 
     return true; 
     } else if (rowDate >= start && start !== ''){ 
     return true; 
     } else { 
     return false; 
     } 
    } 
    ); 
}; 

$('#dateStart').on('change keyup', function(){ 
    dateStart = $(this).val(); 
    filterByDate(3, dateStart); //passing the column value to the function 
    $vesselSchedule.draw(); //updating the table 
}); 

$('#dateEnd').on('change keyup', function(){ 
    dateEnd = $(this).val(); 
    filterByDate(4, dateEnd); 
    $vesselSchedule.draw(); 
}); 

https://www.nwseaportalliance.com/operations/vessels#/ライブの例です。

関連する問題