Question

这个问题只是给出了Jquery Datatables Date Range Filter方案的复制。数据表正确加载，但在选择日期时会引发跟随错误。抛出以下错误：

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 Date Range Filter中给出的单个字段搜索。当我在浏览器中检查开发人员工具时，我可以看到生成了“#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>

Answer 1

你的原始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>

但是说了这一切之后，我认为你正在寻找错误的区域。 show使用你的数据结构和.DataTable（）我怀疑列定义与json不完全匹配有问题。

Answer 2

以下是您可以使用的内容，请在此处查看：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();
           }
       });
});

Answer 3

此问题没有正确的解决方案，但可以在此帖Datepicker returning uncaught typeError: undefined 'currentDay'中找到相关答案请继续Datepicker returning uncaught typeError: undefined 'currentDay'中的所有建议和答案。我正在关闭此帖子，因为即使在链接页面中也找不到一致的行为。

Datatable datefilter正确加载，但在日期选择时抛出Uncaught TypeError

3 个答案: