开发者问题收集

数据表日期过滤器加载正确,但在日期选择时引发未捕获的类型错误

2017-08-25
582

此问题只是 Jquery Datatables 日期范围过滤器 中给出的场景的复制。数据表加载正确,但在选择日期时会抛出以下错误。抛出以下错误:

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,则会抛出上述错误。

我们主要将其用于 Jquery Datatables 日期范围过滤器 中给出的单个字段搜索。当我在浏览器中检查开发人员工具时,我可以看到两个生成了“#datepickerStart”的 DOM。一个在正确的搜索区域中,另一个就在表格区域的末尾。

我很困惑这些重复的表格列是如何通过以下代码生成的。请注意 在注入以下代码或将原始 HTML 放入搜索文本框时会发生这种情况

$('#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 元素两次。

您能帮忙找出问题所在吗?提前致谢。

编辑 1: 表格结构创建如下,

<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>
3个回答

这里有一些东西供您玩,请在此处查看: 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();
           }
       });
});
Bindrid
2017-08-27

您原始的 html 是我所看到的静态形式,所以为什么不将您的搜索框直接放入代码中呢:

    <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><input type="text" placeholder="Search URL"/></th>
                <th><input type="text" placeholder="Search Title"/></th>
                <th><input type="text" placeholder="Search User"/></th>
                <th><input type="text" id="datepickerStart" placeholder="Search Start Date"/></th>
                <th><input type="text" id="datepickerEnd" placeholder="Search End Date"/></th>
                <th><input type="text" placeholder="Search Duration"/></th>
            </tr>
        </tfoot>
    </table>

但说了这么多,我认为您在错误的区域中寻找错误。显示使用您的数据结构和 .DataTable() 我怀疑列定义与 json 不完全匹配存在问题。

Bindrid
2017-08-26

此问题尚未得到妥善解决,但可以在以下帖子中找到相关答案 Datepicker 返回未捕获的 typeError:未定义的“currentDay” 请继续在 Datepicker 返回未捕获的 typeError:未定义的“currentDay” 中提出您的所有建议和答案。我将关闭此帖子,因为即使在链接页面中也未发现一致的行为。

webblover
2017-08-27