Question

这是我的桌子：

<input id="myInput" type="text" name="myInputSearches" placeholder="Week..." style="margin-top:4px">
<label class="noResults" align="right" style="display:none; color:red"><b><i>No Match Found</i></b></label>

....

<tbody id="myTable">
    {% for event in eventList %}
      <tr>
        <td><div style="width:100px">{{ event.week|date:"d-m-Y" }}</div></td>
        <td><div style="width:200px; text-transform: uppercase">{{ event.name }}</div></td>
        <td><div id="day0" style="width:200px; text-transform: uppercase">{{ event.sunday }}</div></td>
        <td><div id="day1" style="width:200px; text-transform: uppercase">{{ event.monday }}</div></td>
        <td><div id="day2" style="width:200px; text-transform: uppercase">{{ event.tuesday }}</div></td>
        <td><div id="day3" style="width:200px; text-transform: uppercase">{{ event.wednesday }}</div></td>
        <td><div id="day4" style="width:200px; text-transform: uppercase">{{ event.thursday }}</div></td>
        <td><div id="day5" style="width:200px; text-transform: uppercase">{{ event.friday }}</div></td>
        <td><div id="day6" style="width:200px; text-transform: uppercase">{{ event.saturday }}</div></td>
      </tr>
    {% endfor %}
  </tbody>

这是我当前用于过滤表格的jQuery：

<script> //No Results message
  $(document).ready(function () {
    (function ($) {
      $("#myInput").keyup(function () {
        var rex = new RegExp($(this).val(), "i");
        $("#myTable tr").hide();
        $("#myTable tr").filter(function () {
          return rex.test($(this).text());
        }).show();
        $(".noResults").hide();
        if($("#myTable tr:visible").length == 0) {
          $(".noResults").show();
        }
      })
    }(jQuery));
  });

当我输入查询内容时，我目前可以进行过滤。我想使用datetimepicker选择一个日期，然后过滤表格。

这是我为“ myInput”实现datetimepicker的方式：

$(function () {
  $('#myInput').datetimepicker({
    format:'DD-MM-YYYY',
  });

  $('#myInput').on('dp.change', function (e) {
    var value = $("#myInput").val();
    var firstDate = moment(value, "DD/MM/YYYY").day(0).format("DD/MM/YYYY");
    $("#myInput").val(firstDate);
  });
});

但是，每当我选择一个日期时，表格都不会过滤。我认为这是由于“ keyUp”功能引起的，但我不确定将其更改为什么。

Answer 1

根据您的情况，您需要以编程方式从dp.change触发所需的事件。

OR

将您的代码放入dateimepicker的dp.change事件处理程序中。

$(document).ready(function () {   
   
        $('#myInput').datetimepicker({
            format: 'DD-MM-YYYY',
        });

        $('#myInput').on('dp.change', function (e) {
         var rex = new RegExp($(this).val(), "i");
        $("#myTable tr").hide();
        $("#myTable tr").filter(function () {
            return rex.test($(this).text());
        }).show();
        $(".noResults").hide();
        if ($("#myTable tr:visible").length == 0) {
            $(".noResults").show();
        }
        });  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>


 <div class='col-sm-6'>
            <div class="form-group" style="position:relative">
                <div class='input-group date' id='datetimepicker1'>
                    
                    <input id="myInput" type="text" name="myInputSearches" class="form-control"  >
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        

<label class="noResults" align="right" style="display:none; color:red"><b><i>No Match Found</i></b></label>


<table>
<tbody id="myTable">
   
      <tr>
        <td><div style="width:200px; text-transform: uppercase">name </div></td>
        <td><div id="day0" style="width:200px; text-transform: uppercase">23-01-2019 </div></td>
        <td><div id="day1" style="width:200px; text-transform: uppercase">monday</div></td>
        <td><div id="day2" style="width:200px; text-transform: uppercase"> tuesday </div></td>
        <td><div id="day3" style="width:200px; text-transform: uppercase">wednesday </div></td>
        <td><div id="day4" style="width:200px; text-transform: uppercase">thursday</div></td>
        <td><div id="day5" style="width:200px; text-transform: uppercase">friday </div></td>
        <td><div id="day6" style="width:200px; text-transform: uppercase"> saturday</div></td>
      </tr>
       <tr>
        <td><div style="width:200px; text-transform: uppercase">name </div></td>
        <td><div id="day0" style="width:200px; text-transform: uppercase">30-01-2019 </div></td>
        <td><div id="day1" style="width:200px; text-transform: uppercase">monday</div></td>
        <td><div id="day2" style="width:200px; text-transform: uppercase"> tuesday </div></td>
        <td><div id="day3" style="width:200px; text-transform: uppercase">wednesday </div></td>
        <td><div id="day4" style="width:200px; text-transform: uppercase">thursday</div></td>
        <td><div id="day5" style="width:200px; text-transform: uppercase">friday </div></td>
        <td><div id="day6" style="width:200px; text-transform: uppercase"> saturday</div></td>
      </tr>
   
  </tbody>
  <table>

如何使用DATETIMEPICKER按日期过滤HTML表？

1 个答案: