尽管我在搜索时绘制日期选择器，但请求日期未显示为日期选择器？

Question

我在 jQuery 数据表上工作，我面临问题请求日期不显示与日期选择器相关的搜索。

tfoot

部分是单独搜索任何列的行。

搜索正在将请求日期作为输入文本进行工作。

但唯一的问题是我无法解决它请求日期显示为输入文本

期望的结果是将请求日期显示为日期选择器并启用搜索

请求日期搜索作为日期选择器工作成功，但在标题上（错误的位置）。

我需要在标题上方的搜索行上使用日期选择器显示请求日期。

为什么我尝试如下

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

预期结果如下图

Answer 1

问题出在这一行：

let datepickerInput = document.createElement('input');

这将创建另一个

<input>

元素并添加到表标题中。

您应该恢复之前创建的

<input>

元素。

let datepickerInput = input;

此外，从您的代码来看，有一些代码是多余的，没有必要将

<input>

元素添加到表头中。简化代码如下：

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 = input;
        datepickerInput.type = 'text';
        datepickerInput.id = 'datepicker';
        datepickerInput.placeholder = 'Search ' + title;
        $(datepickerInput).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();
        }
      });
    });
}

JS 演示 @ StackBlitz