Date range filter not working

Question

im trying to filter the DatePickedUp field with range but my code doesnt working plesase help thanks.

 

<div class="ContainerBanner">
    <h3 class="pickups">Packages</h3> <br />
    <p id="date_filter">
        <span id="date-label-from" class="date-label">From: </span><input class="date_range_filter date" type="text" id="datepicker_from" />
        <span id="date-label-to" class="date-label">To: </span><input class="date_range_filter date" type="text" id="datepicker_to" />
    </p>

    <table id="example" class="display table table-striped" style="width:100%">
        <thead>
            <tr>
                <th>Package #</th>
                <th>Tracking #</th>
                <th>Agent</th>
                <th>Client</th>
                <th>Contact #</th>
                <th>Address</th>
                <th>Date Posted</th>
                <th>Pickup Date</th>
                <th>Status</th>
                <th>Date Pickedup</th>
                <th>Notes</th>
                <th></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    @if ((Roles.IsUserInRole("Administrator")) || (Roles.IsUserInRole("Agent")) || (Roles.IsUserInRole("Sub-Agent")))
    {
        <a href="@Url.Action("addoredit", "pickup")" class="btn btn-primary btn-sm"><i class="fas fa-calendar-check"></i>  Schedule a Pickup</a>
    }
</div>

 

<script type="text/javascript">
    $(function () {
        var oTable = $('#example').DataTable({
            "ajax": "@Url.Action("getpickuplist", "pickup")",
            "oLanguage": { "sSearch": "Filter Data" },
            "sPaginationType": "full_numbers",
            "columns": [
                { "data": "ReferenceNumber" },
                { "data": "TrackingNumber" },
                { "data": "AgentName" },
                { "data": "ClientFullName" },
                { "data": "PrimaryContact" },
                { "data": "Address" },
                { "data": "DatePosted" },
                { "data": "PickupDate" },
                { "data": "Status" },
                { "data": "DatePickedup" },
                { "data": "Notes" },
                {
                    "render": function (data, type, full, meta) {
                        return "<button class='btn btn-primary btn-sm' onclick='edit(" + full.Id + ")'><i class='fas fa-user-edit'></i></button>"
                    }
                }
            ]
        });

        $("#datepicker_from").datepicker({
            showOn: "button",
            buttonImage: "images/calendar.gif",
            buttonImageOnly: false,
            "onSelect": function (date) {
                minDateFilter = new Date(date).getTime();
                oTable.fnDraw();
            }
        }).keyup(function () {
            minDateFilter = new Date(this.value).getTime();
            oTable.fnDraw();
        });

        $("#datepicker_to").datepicker({
            showOn: "button",
            buttonImage: "images/calendar.gif",
            buttonImageOnly: false,
            "onSelect": function (date) {
                maxDateFilter = new Date(date).getTime();
                oTable.fnDraw();
            }
        }).keyup(function () {
            maxDateFilter = new Date(this.value).getTime();
            oTable.fnDraw();
        });
    });

    // Date range filter
    minDateFilter = "";
    maxDateFilter = "";

    $.fn.dataTableExt.afnFiltering.push(
        function (oSettings, aData, iDataIndex) {
            if (typeof aData._date == 'undefined') {
                aData._date = new Date(aData[9]).getTime();
            }
            if (minDateFilter && !isNaN(minDateFilter)) {
                if (aData._date < minDateFilter) {
                    return false;
                }
            }
            if (maxDateFilter && !isNaN(maxDateFilter)) {
                if (aData._date > maxDateFilter) {
                    return false;
                }
            }
            return true;
        }
    );