jQuery DataTables yadcf大于等于(date)

时间:2016-03-28 22:08:20

标签: javascript jquery datatables yadcf

我正在使用jQuery YADCF插件过滤掉格式为mm-dd-yyyy的日期列。该插件开箱即用,除了它只显示日期上的精确匹配。它会告诉我03/06/2016如果确切的行在表中,但我真的希望它显示03/06/2016以及之后的所有日期。

我一直在尝试使用DataTables手动执行此操作,并且没有实际工作或记录良好的jQuery DataTables版本,其中"大于等于"日期搜索。

有没有人使用YADCF(或DataTables solo)成功完成此操作?

1 个答案:

答案 0 :(得分:0)

我的用例是YADCF的边缘情况,因此我重新调整了http://codepen.io/markmichon/pen/tmeGD中的一些代码以使我的过滤器正常工作。我这次没有使用YADCF,但很高兴知道它就在那里。对插件作者丹尼尔大声喊叫,回应我!

// 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#/是一个实例。