我想使用Tablesorter filter_formatter＆＃34; uiDatepicker＆＃34;通过选择日期范围（从和到）来按日期过滤结果。
到目前为止，渲染了过滤器小部件。然而，当我在一个或两个输入中选择日期时，表的所有行都被隐藏。这个uiDatepicker - 过滤器如何工作？
下面我已经包含了html表和我使用的tablesorter-code。我将uiDatepicker应用于列标题<th class='TransactieTijd'>。我认为，uiDatepicker - 输入（特定日期格式）与单元格中的值之间存在差异。我尝试使用addParser实现解析器，并尝试在$.tablesorter.filter.types中定义自定义过滤器。这两种尝试都没有帮助，所以我可能在定义过滤器和/或解析器方面做错了。
我希望得到一些帮助来解决如何弥合单元格值和过滤输入值之间的差异，因为我认为存在问题。我错过了什么，或者犯了错误吗？
<table class="tablesorter tablesorter-default hasFilters" id="debzoeker" role="grid">
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr class="tablesorter-headerRow" role="row" style="cursor: pointer;">
<th tabindex="0" class="Boekdatum tablesorter-header tablesorter-headerUnSorted" role="columnheader" aria-disabled="false" aria-controls="debzoeker" style="-ms-user-select: none;" aria-label="Boekdatum: No sort applied, activate to apply an ascending sort" aria-sort="none" scope="col" data-column="0" unselectable="on">
<div class="tablesorter-header-inner">
<input name="Boekdatum" class="colCheck" type="checkbox" checked="checked" cp-click="updateCheck" data-eventid="cp-23">
Boekdatum
</div>
</th>
<th tabindex="0" class="Bedrag tablesorter-header tablesorter-headerUnSorted filter-parsed" role="columnheader" aria-disabled="false" aria-controls="debzoeker" style="-ms-user-select: none;" aria-label="Bedrag: No sort applied, activate to apply an ascending sort" aria-sort="none" scope="col" data-column="1" unselectable="on">
<div class="tablesorter-header-inner">
<input name="Bedrag" class="colCheck" type="checkbox" checked="checked" cp-click="updateCheck" data-eventid="cp-24">
Bedrag
</div>
</th>
<th tabindex="0" class="RekeningnummerWederpartij tablesorter-header tablesorter-headerUnSorted" role="columnheader" aria-disabled="false" aria-controls="debzoeker" style="-ms-user-select: none;" aria-label="RekeningnummerWederpartij: No sort applied, activate to apply an ascending sort" aria-sort="none" scope="col" data-column="2" unselectable="on">
<div class="tablesorter-header-inner">
<input name="RekeningnummerWederpartij" class="colCheck" type="checkbox" checked="checked" cp-click="updateCheck" data-eventid="cp-25">
RekeningnummerWederpartij
</div>
</th>
<th tabindex="0" class="Wederpartij tablesorter-header tablesorter-headerUnSorted" role="columnheader" aria-disabled="false" aria-controls="debzoeker" style="-ms-user-select: none;" aria-label="Wederpartij: No sort applied, activate to apply an ascending sort" aria-sort="none" scope="col" data-column="3" unselectable="on">
<div class="tablesorter-header-inner">
<input name="Wederpartij" class="colCheck" type="checkbox" checked="checked" cp-click="updateCheck" data-eventid="cp-26">
Wederpartij
</div>
</th>
<th tabindex="0" class="Omschrijving tablesorter-header tablesorter-headerUnSorted" role="columnheader" aria-disabled="false" aria-controls="debzoeker" style="-ms-user-select: none;" aria-label="Omschrijving: No sort applied, activate to apply an ascending sort" aria-sort="none" scope="col" data-column="4" unselectable="on">
<div class="tablesorter-header-inner">
<input name="Omschrijving" class="colCheck" type="checkbox" checked="checked" cp-click="updateCheck" data-eventid="cp-27">
Omschrijving
</div>
</th>
<th tabindex="0" class="TransactieTijd tablesorter-header tablesorter-headerUnSorted filter-parsed" role="columnheader" aria-disabled="false" aria-controls="debzoeker" style="-ms-user-select: none;" aria-label="TransactieTijd: No sort applied, activate to apply an ascending sort" aria-sort="none" scope="col" data-column="5" unselectable="on">
<div class="tablesorter-header-inner">
<input name="TransactieTijd" class="colCheck" type="checkbox" checked="checked" cp-click="updateCheck" data-eventid="cp-28">
TransactieTijd
</div>
</th>
</tr>
<tr class="tablesorter-filter-row tablesorter-ignoreRow" role="row">
<td data-column="0">
<input class="tablesorter-filter" type="search" placeholder="" data-column="0" data-lastsearchtime="1487927054752">
</td>
<td data-column="1">
<input class="filter tablesorter-filter" type="hidden" placeholder="" value="" data-column="1" data-lastsearchtime="1487927054752">
<div class="range range1 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 0%; width: 100%;"></div>
<span tabindex="0" class="ui-slider-handle ui-state-default ui-corner-all value-popup" style="left: 0%;" data-value="<MINIMAL VALUE>"></span>
<span tabindex="0" class="ui-slider-handle ui-state-default ui-corner-all value-popup" style="left: 100%;" data-value="<MAXIMAL VALUE>"></span>
</div>
</td>
<td data-column="2">
<input class="tablesorter-filter" type="search" placeholder="" data-column="2" data-lastsearchtime="1487927054752">
</td>
<td data-column="3">
<input class="tablesorter-filter" type="search" placeholder="" data-column="3" data-lastsearchtime="1487927054752">
</td>
<td data-column="4">
<input class="tablesorter-filter" type="search" placeholder="" data-column="4" data-lastsearchtime="1487927054752">
</td>
<td data-column="5">
<input class="dateRange tablesorter-filter" type="hidden" placeholder="" value="" data-column="5" data-lastsearchtime="1487928159675">
<label>from</label>
<input class="dateFrom hasDatepicker" id="dp1487927047626" type="text" placeholder="">
<label>to</label>
<input class="dateTo hasDatepicker" id="dp1487927047627" type="text" placeholder="">
</td>
</tr>
</thead>
<tbody class="ui-sortable" aria-live="polite" aria-relevant="all">
<tr class="ui-sortable-handle" role="row">
<td>03-01-2017</td>
<td>currency value</td>
<td>account number</td>
<td>account name</td>
<td>description</td>
<td data-datesort="03-02-2017">03-01-2017, 00:00</td>
</tr>
<tr class="ui-sortable-handle" role="row">
<td>07-01-2017</td>
<td>currency value</td>
<td>account number</td>
<td>account name</td>
<td>description</td>
<td data-datesort="07-02-2017">07-01-2017, 00:00</td>
</tr>
<tr class="ui-sortable-handle" role="row">
<td>07-01-2017</td>
<td>currency value</td>
<td>account number</td>
<td>account name</td>
<td>description</td>
<td data-datesort="07-02-2017">07-01-2017, 00:00</td>
</tr>
<tr class="ui-sortable-handle" role="row">
<td>08-01-2017</td>
<td>currency value</td>
<td>account number</td>
<td>account name</td>
<td>description</td>
<td data-datesort="08-02-2017">08-01-2017, 00:00</td>
</tr>
<tr class="ui-sortable-handle" role="row">
<td>08-01-2017</td>
<td>currency value</td>
<td>account number</td>
<td>account name</td>
<td>description</td>
<td data-datesort="08-02-2017">08-01-2017, 00:00</td>
</tr>
</tbody>
</table>
$("#debzoeker").tablesorter({
widgets: ["filter"],
widgetOptions : {
filter_formatter : {
'.Bedrag' : function(d,$cell, indx){
var c = getColumnIndex(d,"Bedrag");
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
delayed : false,
valueToHeader : false,
// jQuery UI slider options
values : [datemin, datemax],
min : datemin,
max : datemax
});
}.bind(this,d),
'.TransactieTijd' : function($cell, indx){
return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
dateFormat: "dd-mm-yy",
changeMonth : true,
changeYear : true
});
},
}/*,
// previously, I tried to define a filter in the headers property (see code below)
headers: {
".TransactieTijd": {filter: 'datumFilter'}
}*/
},
});
$('#debzoeker > tbody').sortable();
$.tablesorter.filter.types.datumFilter = function( config, data ) {
return true;
// a test-filter.. I thought that "return true" would show all the rows anyway, but it did not have any effect (still, all rows were hidden after filling in the uiDatepicker inputs)
}
解析器基于我添加到单元格的属性，以及＃34;桥接＆＃34;过滤器输入和单元格值之间的值差异。
$.tablesorter.addParser({
// set a unique id
id: 'datumParser',
is: function(s, table, cell, $cell) {
// return false so this parser is not auto detected
return false;
},
format: function(s, table, cell, cellIndex) {
var $cell = $(cell);
// I could have used $(cell).data(), then we get back an object which contains both
// data-lastname & data-date; but I wanted to make this demo a bit more straight-forward
// and easier to understand.
// first column (zero-based index) has lastname data attribute
if ($cell.hasClass('TransactieTijd')) {
// returns lastname data-attribute, or cell text (s) if it doesn't exist
return $cell.attr('data-datesort') || s;
}
// return cell text, just in case
return s;
},
// flag for filter widget (true = ALWAYS search parsed values; false = search cell text)
parsed: false,
// set type, either numeric or text
type: 'numeric'
});