Request Date not display search as date picker but it display as input

Hello @ahmed salah

The issue is that the datepickerInput is being created as an input of type "text" instead of "date".

To fix this bug, you need to change the type attribute of the datepickerInput to "date" as shown below:

if (title === "Request Date") {
    let datepickerInput = document.createElement('input');
    datepickerInput.type = "date"; // Change the type to "date"
    datepickerInput.id = "datepicker";
    datepickerInput.placeholder = "Search " + title;
    $(datepickerInput).datepicker({
        dateFormat: 'yy-mm-dd',
        onSelect: function (dateText) {
            column.search(dateText).draw();
        }
    });

    column.header().appendChild(datepickerInput);
}

Request Date Display as Date Picker

To display the request date as a date picker and enable search, you can modify the code as follows:

$(document).ready(function () {
    new DataTable('#dtbl', {
        "dom": 'rtip',
        "order": [[0, 'desc'], [2, 'asc']],
        initComplete: function () {
            $('#dtbl tfoot tr').insertBefore($('#dtbl thead tr'))
            this.api()
                .columns()
                .every(function () {
                    let column = this;
                    let title = column.footer().textContent;

                    let input = document.createElement('input');
                    input.placeholder = title;

                    $(input).css({
                        "width": "100%",
                        "padding": "0",
                        "margin": "0",
                        "height": $(column.header()).height() + "px",
                        "box-sizing": "border-box"
                    });

                    column.footer().innerHTML = ''; // Clear the footer cell
                    column.footer().replaceChildren(input);

                    if (title === "Request Date") {
                        let datepickerInput = document.createElement('input');
                        datepickerInput.type = "date"; // Change the type to "date"
                        datepickerInput.id = "datepicker";
                        datepickerInput.placeholder = "Search " + title;
                        $(datepickerInput).datepicker({
                            dateFormat: 'yy-mm-dd',
                            onSelect: function (dateText) {
                                column.search(dateText).draw();
                            }
                        });

                        column.header().appendChild(datepickerInput);
                    } else {
                        $(this).html('');
                    }

                    $(column.footer()).html(input);
                    input.addEventListener('keyup', () => {
                        if (column.search() !== this.value) {
                            column.search(input.value).draw();
                        }
                    });
                });
        }
    });
});