Bootstrap filterControl to filter bootstrap table data for date datatype

[JetalS]

Hi,

I am using boostrap table to display data. I have added date filter control to filter bootstrap table data for date datatype. I am using filterControl="input" and attaching tempus dominus date picker to pick date. when i choose date from date picker

data is not filtering as per selected date. here is my code. any help is geately appriciated.

<title>Dynamic Bootstrap Table - Date Filter</title>

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<!-- Tempus Dominus Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/dist/css/tempus-dominus.min.css" crossorigin="anonymous">

<!-- jQuery 3.7 -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<!-- Tempus Dominus JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/dist/js/tempus-dominus.min.js"></script>

<!-- Custom Script -->
<script>
    var columnsArray = [
        {
            "sortable": "true",
            "field": "StringCol",
            "title": "Name",
            "filterControl": "input",
            "filterControlMultipleSearch": "true"
        },
        {
            "sortable": "true",
            "field": "DateCol",
            "title": "Date",
            "filterControl": "input",
            "formatter": DateFormatter,
            "dataType": "date"
        }
    ];

    $(function () {
        // Initialize the table
        $('#BSTable').bootstrapTable({
            columns: columnsArray,
            data: [
                { "StringCol": "Name1", "DateCol": "2024-05-02T00:00:00" },
                { "StringCol": "Name2", "DateCol": "2024-07-09T00:00:00" },
                { "StringCol": "Name3", "DateCol": "2024-08-12T00:00:00" },
                { "StringCol": "Name4", "DateCol": "2024-11-10T00:00:00" },
                { "StringCol": "Name4", "DateCol": "2024-11-08T00:00:00" }
            ],
            locale: "en-US",
            filterControl: true,
            onColumnSearch: applyDatepicker // Apply datepicker to Date column's filter control
        });
    });

    function applyDatepicker() {
        // Apply datepicker only to Date filter input
        var dateInput = $("input.bootstrap-table-filter-control-DateCol");

        // Check if the datepicker is already applied; if not, apply it
        if (!dateInput.data('datepicker-initialized')) {
            var picker = new tempusDominus.TempusDominus(dateInput[0], {
                display: {
                    components: {
                        calendar: true,
                        date: true,
                        month: true,
                        year: true,
                        decades: true,
                        clock: false
                    }
                },
                localization: {
                    format: 'dd/MM/yyyy' // Matching the format used in table data
                }
            });

            // Mark as initialized to prevent reapplying
            dateInput.data('datepicker-initialized', true);

            // Event listener for date selection
            dateInput.on('change', function () {
			
                var selectedDate = picker.dates.picked[0];
				//alert('input change fier' );
				//alert(selectedDate);
                if (selectedDate) {
                    // Convert to the filter format (YYYY-MM-DD)
                    var formattedDate = moment(selectedDate).format('YYYY-MM-DD');
                    $('#BSTable').bootstrapTable('filterBy', {
                        DateCol: formattedDate
                    });
                }
            });
        }
    }

    function DateFormatter(value) {
        return value ? moment(value).format('DD/MM/YYYY') : '';
    }
</script>

Dynamic Bootstrap Table With Date Filter using Tempus Dominus