İki tarih arasını filtreleme

Bir önceki konumdaki problemi datatables kütüphanesini bırakıp elimdeki temanın kendi html table yapısını kullanmaya başlayarak kurtuldum fakat bu seferde iki tarih arasını filtreleme işinin içinden çıkamadım onun dışındaki filtrelerim çalışıyor. jQuery ile iki tarih arasını nasıl filtreleye bilirim.

<table class="kt-datatable" id="html_table" width="100%">
<thead>
<tr>
<th title="Field #1">Tarih</th>
<th title="Field #2">Bayi Lisans Numarası</th>
<th title="Field #3">Kısa Ünvan</th>
<th title="Field #4">Köy Pompa No</th>
<th title="Field #5">Tank Numarası</th>
<th title="Field #6">Tank Kapasitesi</th>
<th title="Field #7">Akaryakıt Türü</th>
<th title="Field #8">Gün Başı Stok</th>
<th title="Field #9">Tank Dolum</th>
<th title="Field #10">Satış</th>
<th title="Field #11" data-field="EPDKDurum">EPDK Durum</th>
<th title="Field #12" data-field="ZD">ZD</th>
</tr>
</thead>
<tbody>
<?php
foreach ($gelenveri as $value)
{
?>
<tr>
<td><?php echo $value->tablo; ?></td>
<td><?php echo $value->tablo; ?></td>
<td><?php echo $value->tablo; ?></td>
<td><?php echo $value->tablo; ?></td>
<td><?php echo $value->tablo; ?></td>
<td><?php echo $value->tablo; ?></td>
<td><?php echo $value->tablo; ?></td>
<td><?php echo $value->tablo; ?></td>
<td><?php echo $value->tablo; ?></td>
<td><?php echo $value->tablo; ?></td>
<td align="right"><?php echo $value->tablo; ?></td>
<td align="right"><?php echo $value->tablo; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>

"use strict";
// Class definition

var KTDatatableHtmlTableDemo = function() {
    // Private functions

    // demo initializer
    var demo = function() {

        var datatable = $('.kt-datatable').KTDatatable({
            data: {
                saveState: {cookie: false},
            },
            search: {
                input: $('#generalSearch'),
            },
            columns: [

                {
                    field: 'Tarih',
                    type: 'date',
                    format: 'DD-MM-YYYY',
                },
                {
                    field: 'Bayi Lisans Numarası',
                    type: 'text',
                    title: 'Bayi Lisans Numarası',
                    selector: false,
                    textAlign: 'center',
                },
                {
                    field: 'Kısa Ünvan',
                    type: 'text',
                    title: 'Kısa Ünvan',
                    selector: false,
                    textAlign: 'center',
                },
                {
                    field: 'Köy Pompa No',
                    type: 'number',
                    title: 'Köy Pompa No',
                    selector: false,
                    textAlign: 'center',
                },
                {
                    field: 'Satış',
                    type: 'number',
                    title: '#',
                    sortable: 'asc',
                    width: 40,
                    selector: false,
                    textAlign: 'center',
                }, {
                    field: 'ZD',
                    title: 'Z D',
                    autoHide: false,
                    // callback function support for column rendering
                    template: function(row) {
                        var status = {
                            0: {'title': 'Z.D', 'class': 'kt-badge--danger'},
                            1: {'title': 'Z.D', 'class': ' kt-badge--success'},
                        };
                        return '<span class="kt-badge ' + status[row.ZD].class + ' kt-badge--inline kt-badge--pill">' + status[row.ZD].title + '</span>';
                    },
                }, {
                    field: 'EPDKDurum',
                    title: 'EPDK Durum',
                    autoHide: false,
                    // callback function support for column rendering
                    template: function(row) {
                        var status = {
                            1: {'title': 'Gönderildi', 'state': 'success'},
                            2: {'title': 'Gönderilmedi', 'state': 'warning'},
                            3: {'title': 'Ticket Açık', 'state': 'danger'},
                        };
                        return '<span class="kt-badge kt-badge--' + status[row.EPDKDurum].state + ' kt-badge--dot"></span>&nbsp;<span class="kt-font-bold kt-font-' +status[row.EPDKDurum].state + '">' +    status[row.EPDKDurum].title + '</span>';
                    },
                },
            ],
        });

$('#kt_form_status').on('change', function() {
datatable.search($(this).val().toLowerCase(), 'EPDKDurum');
});

$('#kt_form_type').on('change', function() {
datatable.search($(this).val().toLowerCase(), 'ZD');
});

$('#kt_form_status,#kt_form_type').selectpicker();
        
    };

    return {
        // Public functions
        init: function() {
            // init dmeo
            demo();
        },
    };
}();

jQuery(document).ready(function() {
    KTDatatableHtmlTableDemo.init();
});

2 tane <input type="date" id="date_one">, <input type="date" id="date_two"> Jquery de 2. date_two .change olduğunda .val() aldırarak iki tarih arası filtreleme yaptırabilirsin

Denedim fakat tabloya yansıtmayı başaramadım

Bir tane de ajax sayfan olmalı. 2 tarihi post edebileceğin, sql kodunda filtreleme yapabileceğin ve geri dönüş yaptırabileceğin eğer yapamazsan pm at yardımcı olayım

PM Gönderdim hocam yalnız tablo içinde search yaptığım bir input mevcut ve bu input herhangi bir sql sorgusuna bağlı değil tarih filtresinide onun gibi yapmak istiyorum ilgili olmayan verileri temizleyip sadece ilgili veriyi göstermek