date range filter jquery

Question

How to filter data based on date range? Following are my html and javascript code:

My HTML code:

<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>

My Java script:-

<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>

possible duplicate of [Reset and keep the dates as default dates in datepicker](http://stackoverflow.com/questions/27100704/reset-and-keep-the-dates-as-default-dates-in-datepicker) — Abhitalks, Nov 25 '14 at 12:55
Do not create a new question. Try and improve the existing question. — Abhitalks, Nov 25 '14 at 12:56

score 2 · Accepted Answer · answered Nov 26 '14 at 06:08

I have written a small javascript which filters table data using date range,pass the date range to that function from date picker this jsfiddle might help you

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

date range filter jquery

1 Answers1