数据表datefilter正确加载，但在日期选择上引发Uncaught TypeError [英] Datatable datefilter loads correctly but throws Uncaught TypeError on date selection

问题描述

这个问题只是 Jquery Datatables日期范围过滤器给出的方案的复制.数据表已正确加载，但选择日期时引发以下错误.引发以下错误:

This question is just a replication of scenario given Jquery Datatables Date Range Filter. The datatable loads correctly but throws following error when selecting a date. The following error is thrown:

Uncaught TypeError: Cannot set property 'currentDay' of undefined
    at Datepicker._selectDay (jquery-ui.1.12.1.js:8188)
    at HTMLTableCellElement.selectDay (jquery-ui.1.12.1.js:8789)
    at HTMLTableCellElement.dispatch (jquery.v1.12.0.min.js:3)
    at HTMLTableCellElement.r.handle (jquery.v1.12.0.min.js:3)

检查 这个问题是众所周知的.例如，如果datepicker元素ID为" #datepickerStart "，则在给定页面中应仅将其加载一次.如果两个DOM元素具有相同的元素ID，则将引发以上错误.

Examining This issue is well known. For example if datepicker element id is "#datepickerStart", it should be loaded only once in given page. If two DOM element has this same element id, above error will be thrown.

我们主要将其用于 Jquery数据表日期范围过滤器.当我在浏览器中检查开发人员工具时，我可以看到生成了"#datepickerStart"的两个DOM.一个在搜索区域中是正确的，另一个在表区域的末尾.

We used it mainly for individual field search as given in Jquery Datatables Date Range Filter. When I inspected developer tools in browser, I could see two DOM having "#datepickerStart" generated. One in search area which is correct and the other just at the end of table area.

我很困惑如何通过以下代码生成这些重复的表列.请注意，在注入以下代码或为搜索文本框添加原始HTML时会发生这种情况:

I am confused how these duplicate table columns are generated by following code. Please know that this happens when either injecting below code or putting raw HTML for search text boxes:

$('#example tfoot th').each(function (){
    var title = $(this).text();

    if (title === "Start date") {
        $(this).html( '<input type="text" id="datepickerStart" placeholder="Search '+title+'" />' );

    } else if (title === "End date") {
        $(this).html( '<input type="text" id="datepickerEnd" placeholder="Search '+title+'" />' );

    } else {
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    }
});

我想念某件事还是做错了吗?我交叉检查了我没有两次初始化数据表或两次没有创建datePicker元素.

Do I miss something or I do it the wrong way? I cross-checked that I didn't initialize datatable twice or created datePicker element twice.

您能帮忙弄清楚哪里出了问题吗?预先感谢.

Could you please help sort out where it goes wrong? Thanks in advance.

表结构创建如下，

<table id='example' class="display" cellspacing="0" width="100%">
        <thead>
            <tr> 
                <th>URL</th>
                <th>Title</th>
                <th>User</th>
                <th>Start date</th>
                <th>End date</th>
                <th>Duration</th>  
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>URL</th>
                <th>Title</th>
                <th>User</th>
                <th>Start date</th>
                <th>End date</th>
                <th>Duration</th>  
            </tr>
        </tfoot>
    </table>

推荐答案

以下是您可以玩的东西，请在此处查看:

Here is something for you to play with, see it here: http://jsbin.com/haxaror/edit?html,js,output

$(document).ready(function () {

    // my dates did not fit yours so this simple loop fixes that
    for (var i = 0; i < dataSet.length; ++i) {
        dataSet[i].start_date = startdates[i];
        dataSet[i].end_date = enddates[i];
    }
    // Column defs (just the way i do it)
    var col = [
        { data: "first_name" },
        { data: "last_name" },
        { data: "position" },
        { data: "office" },
        { data: "start_date", type: "date" },
        { data: "end_date", type: "date" },
        { data: "salary" }
    ];

    var thistable = $('#example').DataTable({
        data: dataSet,
        select: { style: 'single' },
        columns: col,
        dom: 'frtip',
    })

    // Apply the search including date columns. Datepicker will not allow invalid dates
    thistable.columns().every(function () {
        var that = this;
        $('input', this.footer()).on('keyup change', function () {
            that
            .search(this.value)
            .draw();
        });
    });


    $("#datepickerStart").datepicker(
    {
      dateFormat: "yy-mm-dd", changeYear: true,
      onSelect: function (dateText, inst) {
          thistable.column(4)
             .search(dateText)
             .draw();
          }
      });
    $("#datepickerEnd").datepicker(
    {
       dateFormat: "yy-mm-dd", changeYear: true,
       onSelect: function (dateText, inst) {
           thistable.column(5)
               .search(d)
               .draw();
           }
       });
});

这篇关于数据表datefilter正确加载，但在日期选择上引发Uncaught TypeError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！