日期範圍過濾器jquery

Question

如何根據日期範圍過濾數據？以下是我的HTML和JavaScript代碼：

我的HTML代碼：

<label for="fromDateRange">From:</label> 

<div id="fromDateRange"></div> 
</div> 
<div style="margin-left:20px; display: inline-block; font-weight: bold;"> 
    <label for="toDateRange">Till:</label> 
    <div id="toDateRange"> 

    </div> 
</div> 
<div class="buttons-sec"> 
    <button id="date-blue" type="submit" class="pure-button pure-button-small blue" onclick="getdates()" <?php echo base_url(); ?>payment/cash" >Search</button> 
    <button id="date-gray" type="submit" class="pure-button pure-button-small gray" onclick="clearDates()">Reset</button> 
</div> 

我的Java腳本： -

<script type="text/javascript"> 

    $('#toDateRange').datepicker({ 

     // minDate: $("#fromDateRange").datepicker("getDate"), 
     changeMonth: true, 
     changeYear: true, 
     numberOfMonths: 1, 
     dateFormat: "yy-mm-dd", 
     onSelect: function(selectedDate) { 
      $("#fromDateRange").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 


    $("#fromDateRange").datepicker({ 
     defaultDate: "-1m", 
     changeMonth: true, 
     changeYear: true, 
     numberOfMonths: 1, 
     dateFormat: "yy-mm-dd", 
     onSelect: function(selectedDate) { 
      $("#toDateRange").datepicker("option", "minDate", selectedDate); 
     } 
    }); 

</script> 


<script type="text/javascript"> 

    $('#dateFilter').on('click', function(e) { 
     $('.date-range').on('click', function(e) { 
      e.preventDefault(); 
      return false; 
     }); 
     $('#date-range').toggle(); 
     e.preventDefault(); 
     return false; 
    }); 
    $('body').click(function() { 
     $('#date-range').hide(); 
    }); 

</script> 

//To get dates or to clear 
<script type="text/javascript"> 

    function getdates() { 

     var fromDate = $.datepicker.formatDate("dd MM, yy", $("#fromDateRange").datepicker("getDate")); 
     var toDate = $.datepicker.formatDate("dd MM, yy", $("#toDateRange").datepicker("getDate")); 


     $('#dateFilter').val(fromDate + '-' + toDate); 
     $("#dateFilter").trigger("change"); 
     $('#date-range').hide(); 

    } 

    // To clear the dates 

    function clearDates() { 
     clear = ""; 
     $('#dateFilter').val(clear); 
     $("#fromDateRange").datepicker('setDate', 'today-1m'); 
     $("#toDateRange").datepicker('setDate', 'today'); 
     $("#dateFilter").trigger("change"); 
     $('#date-range').hide(); 
    } 

</script> 

Answer 1

我已經寫了一個小的javascript使用日期範圍，其過濾表中的數據，通從日期選擇器的日期範圍這個jsfiddle可能會幫助你

function doSearch(fr,t) { 
var d1 = fr.split("-"); 
var d2 = t.split("-"); 
var from = new Date(d1[2], d1[1]-1, d1[0]); 
var to = new Date(d2[2], d2[1]-1, d2[0]); 



     var targetTable = document.getElementById('dataTable'); 
     var targetTableColCount; 
     for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) { 
      var rowData = []; 
      if (rowIndex == 0) { 
       targetTableColCount = targetTable.rows.item(rowIndex).cells.length; 
       continue; 
      } 

      for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) { 
       rowData.push(targetTable.rows.item(rowIndex).cells.item(colIndex).textContent); 
      } 
     for(var i=0;i<rowData.length;i++){ 
       var c = rowData[i].split("-"); 
       var check = new Date(c[2], c[1]-1, c[0]); 
       if ((check >= from) && (check <= to)) 
        targetTable.rows.item(rowIndex).style.display = 'table-row'; 
       else 
        targetTable.rows.item(rowIndex).style.display = 'none';      
     } 

     } 
    } 

js fiddle