jQery QuickSearchを使ってdateから年月日形式の日付項目検索

やりたいこと

• テーブルから、指定した日付を含む行を抽出したい
• 日付指定は<input type="date" />でサボりたい
• テーブルの日付は日本語表示（XXXX年XX月XX日）
• keyupじゃなくてボタンクリックで検索したい

使うもの

コード

検索ボックス

<input type="date" id="date_search" />
<button id="date_search_btn" type="button">検索</button>

テーブル

<table>
<tbody>
<tr>
<th>No.</th>
<th>名前</th>
<th>日付</th>
<tr>
<td>1</td>
<td>田中</td>
<td class="date">1980年2月26日(火)</td>
</tr>
<tr>
<td>2</td>
<td>鈴木</td>
<td class="date">1990年10月13日(土)</td>
</tr>
・
・
・

JS

$(function() {
	// 検索ボタンクリックでsearchイベント発火
	$('#date_search_btn').click(function () {
	    $('#date_search').trigger('search');
	});

	$('#date_search').quicksearch('table tbody tr', {
	    selector: 'td.date',
	    bind: 'search',    // デフォルトのkeyupでは動かさせず、↑の検索ボタンクリックによるイベントのみで動かす
	    prepareQuery: function (val) {
	        var date = new Date(val + ' 00:00:00');
	        return date.getFullYear() + "年" + (parseInt(date.getMonth()) + 1) + "月" + date.getDate() + "日"; // 日付の変換
	    },
	    testQuery: function (query, txt, _row) {
	        if (txt.indexOf(query) === -1) {
	            return false;
	        }
	        return true;
	    }
	});
});