How to display request date as date picker instead on input text ?

Question

I work on jQuery data table I face issue request date not display search related as date picker .

tfoot section is row that make search individually for any column .

search is working on request date as input text .

but only issue I can't solve it request date display as input text

desired result is to display request date as date picker with enable search

request date search working success as date picker but on header (wrong place) .

I need to display Request Date with Date picker on search row above header .

why I try as below

<table id="dtbl" class="table table-bordered table-hover table-striped" style="width:100%;padding-left:5px;
padding-right:7px;">
        <thead>
            <tr style="background-color: #f2f2f2;">
 
                <th style="border: 1px solid black;">
                    Request No
                </th>
                <th style="border: 1px solid black;">
                    Employee No
                </th>
                <th style="border: 1px solid black;">
                    Employee Name
                </th>
                <th style="border: 1px solid black;">
                    Request Date 
                </th>
                <th style="border: 1px solid black;">
                Reason    
                </th>
 
            </tr>
        </thead>
 
        <tbody>
            @foreach (var item in Model)
            {
                <tr style="background-color: #f2f2f2;">
 
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.RequestNo)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.EmpID)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.EmpName)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.ResignationSubmissionDate)
                    </td>
                    <td style="border: 1px solid black;">
                    @Html.DisplayFor(modelItem => item.Reason)
                    </td>
 
 
                </tr>
            }
        </tbody>
        <tfoot>
            <tr>
                <th>Request No</th>
                <th>Employee No</th>
                <th>Employee Name</th>
                <th>Request Date</th>
                <th>Reason</th>
 
            </tr>
 
        </tfoot>
    </table>
</div>
 
 $(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);
 
                       var input22;
                       if (title === "Request Date") {
 
                           let datepickerInput = document.createElement('input');
                           datepickerInput.type = "text";
                           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('<input type="text" placeholder="Search ' + title + '" />');
                       }
 
                       $(column.footer()).html(input);
                       input.addEventListener('keyup', () => {
                           if (column.search() !== this.value) {
                               column.search(input.value).draw();
                           }
                       });
                   });
           }
       });
 });

expected result as image below

Answer 1

Hi @Ahmed Salah Abed Elaziz,

According to your description, I found that your main problem: you repeatedly added input elements to the table, but based on your requirement, you only need to determine the title when adding the footer and assign specific input attributes (type and id), and finally render it as a datepicker finally.

Here is the simple demo:

    <link rel="Stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.jqueryui.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/scroller/2.3.0/css/scroller.jqueryui.min.css" rel="stylesheet" />
    <section class="row" aria-labelledby="aspnetTitle">
        <h1 id="title">ASP.NET</h1>

    </section>

    <div class="row">
        <table id="dtbl" class="table table-bordered table-hover table-striped" style="width:100%;padding-left:5px;
padding-right:7px;">
            <thead>
                <tr style="background-color: #f2f2f2;">

                    <th style="border: 1px solid black;">
                        Request No
                    </th>
                    <th style="border: 1px solid black;">
                        Employee No
                    </th>
                    <th style="border: 1px solid black;">
                        Employee Name
                    </th>
                    <th style="border: 1px solid black;">
                        Request Date
                    </th>
                    <th style="border: 1px solid black;">
                        Reason
                    </th>

                </tr>
            </thead>

            <tbody>
                @foreach (var item in Model)
                {
                    <tr style="background-color: #f2f2f2;">

                        <td style="border: 1px solid black;">
                            @Html.DisplayFor(modelItem => item.RequestNo)
                        </td>
                        <td style="border: 1px solid black;">
                            @Html.DisplayFor(modelItem => item.EmpID)
                        </td>
                        <td style="border: 1px solid black;">
                            @Html.DisplayFor(modelItem => item.EmpName)
                        </td>
                        <td style="border: 1px solid black;">
                            @Html.DisplayFor(modelItem => item.ResignationSubmissionDate)
                        </td>
                        <td style="border: 1px solid black;">
                            @Html.DisplayFor(modelItem => item.Reason)
                        </td>


                    </tr>
                }
            </tbody>
            <tfoot>
                <tr>
                    <th>Request No</th>
                    <th>Employee No</th>
                    <th>Employee Name</th>
                    <th>Request Date</th>
                    <th>Reason</th>

                </tr>

            </tfoot>
        </table>
        <br />

    </div>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.jqueryui.js"></script>
    <script src="https://cdn.datatables.net/scroller/2.3.0/js/dataTables.scroller.js"></script>


    <script>
        $(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"
                            });

                            if (title === "Request Date") {
                                input.type = "text";
                                input.id = "datepicker";
                                input.placeholder = "Search " + title;
                            }

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

                            $(column.footer()).html(input);

                            $('input[placeholder="Search Request Date"]').datepicker({
                                    dateFormat: 'yy-mm-dd',
                                    onSelect: function (dateText) {
                                        column.search(dateText).draw();
                                    }
                             });
                            
                            input.addEventListener('keyup', () => {
                                if (column.search() !== this.value) {
                                    column.search(input.value).draw();
                                }
                            });
                        });
                }
            });

        });
    </script>

Result:

Best regards,

Xudong Peng

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.