Question

我尝试使用moment.js过滤范围，但是我遇到了导入该库的问题（与其他库发生冲突），因此，现在我想改用date()构造函数，但它不起作用正确。

您知道为什么它不正确吗？，这是我的尝试：

我使用了date()和getTime()

某些示例在您点击时不起作用：

从：01 01 2019到：31 12 2019

$(function(){

  //NAME
  $("#name").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#my-table").find('tr').filter(function() {
      $(this).toggle($(this).find('td').text().toLowerCase().indexOf(value) > -1)
    });
  });
  
  //FROM
  $("#from").bind("keyup change", function() {
    var value = new Date($(this).val().toLowerCase()).getTime();
    //console.log(value);
    $("#my-table").find('tr').filter(function() {
      $(this).toggle(new Date($(this).find('td:first-child').text()).getTime() >= (value))
      //console.log(new Date($(this).find('td:first-child').text()).getTime());
    });
    
    //clean from
    var val = $(this).val();
    if(val.length === 0) {
      $("#my-table").find('tr').show();
    }
  });
  
  //TO
  $("#to").bind("keyup change", function() {
    var value = new Date($(this).val().toLowerCase()).getTime();
    //console.log(value);
    $("#my-table").find('tr').filter(function() {
      $(this).toggle(new Date($(this).find('td:first-child').text().toLowerCase()).getTime() <= (value))
    });
    
    //clean to
    var val = $(this).val();
    if(val.length === 0) {
      $("#my-table").find('tr').show();
    }
  });
  
  
});

.container input {
    width:25%;
    display:inline-block;
    margin-bottom:20px;
}

.list-group {
  border:1px solid #1896f3;
  padding:20px;
}

.list-group td, th {
  border:1px solid #1896f3;
  padding:7px 100px;
  text-align:center;
}

th {
    text-align: center !important;
    font-size:14px;
    text-transform:uppercase;
}

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  Date from : <input class="form-control" id="from" type="date">
  to : <input class="form-control" id="to" type="date">
  <input class="form-control" id="name" type="text" placeholder="Enter your name...">
  <br>
  <table>
      <thead>
          <tr>
              <th>Date</th>
              <th>Name</th>
          </tr>
      </thead>
      <tbody id="my-table">
        <tr class="list-group">
            <td>2019-11-21</td>
            <td>kal</td>
        </tr>
        <tr class="list-group">
            <td >2015-01-01</td>
            <td>blake</td>
        </tr>
        <tr class="list-group">
            <td>2015-01-30</td>
            <td>secure</td>
        </tr>
        <tr class="list-group">
            <td>2016-03-10</td>
            <td>home</td>
        </tr>
        <tr class="list-group">
            <td>2019-05-19</td>
            <td>car</td>
        </tr>
        <tr class="list-group">
            <td>2014-09-10</td>
            <td>yop</td>
        </tr>
        <tr class="list-group">
            <td>2017-12-30</td>
            <td>wick</td>
        </tr>
      </tbody>
  </table>
</div>

使用date（）按日期范围过滤表行

0 个答案: