javascript - 通过表搜索的日期选择器值？

Question

我有一个日期选择器小部件附加到名为 #searchess 的搜索文本框，搜索文本框应该使用文本框中的任何日期搜索表 #esstable。但是，当我从日期选择器中选择一个日期时，该日期会进入文本框，但在我输入内容之前不会搜索表格。

<script>

          $(function() {
                $( "#searchess" ).datepicker({
                 dateFormat: " yy-mm-dd"
                });
            });

        $("#searchess").keyup(function() {
        var value = this.value;

            $("#esstable").find("tr").each(function(index) {
                if (!index) return;
                var id = $(this).find("td").first().text();
                $(this).toggle(id.indexOf(value) !== -1);
                });
            });

</script>

这是我的 #searchess 文本框搜索:

<input type="text" id="searchess" placeholder="ESS Date Search"></input>

这是表格:

<div id="esstable">
             <table>
                <tbody>
                    <tr>
                      <th>Date</th>
                      <th>ESS File</th>
                    </tr>
                    <tr>
                      <td> 2014-03-17 </td>
                      <td> <a href="./file1"> file ex1</a></td>
                    </tr>
                    <tr>
                      <td> 2013-03-17 </td>
                      <td> <a href="./file2"> file ex2</a></td>
                    </tr>
                </tbody>
             </table>
          </div>

Answer 1

那是因为您的搜索是从 keyup 事件触发的，而当您选择日期时日历不会触发该事件。但是您可以通过以下方式添加该功能:

$("#searchess").datepicker({
    dateFormat: " yy-mm-dd",
    onSelect: function () {
        $("#searchess").trigger('keyup')
    }
});

jsFiddle example