Datatable datefilter正確加載但在選擇日期時拋出Uncaught TypeError

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) 

檢查 這個問題是衆所周知的。例如，如果日期選擇器元素ID是「＃datepickerStart」，則它應該僅在給定頁面中加載一次。如果兩個DOM元素具有相同的元素ID，則會拋出上述錯誤。

我們主要用於Jquery Datatables Date Range Filter中給出的單個字段搜索。當我在瀏覽器中檢查開發人員工具時，可以看到兩個DOM生成了「#datepickerStart」。一個在搜索區域中是正確的，另一個是在表格區域的末尾。

我很困惑如何通過下面的代碼生成這些重複的表列。請知道發生這種情況時，要麼注入下面的代碼或將原始的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

這裏是東西給你一起玩，看到它在這裏：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 2

你原始的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完全不匹配有問題。

Answer 3

這個問題沒有妥善解決，但相關答案可以在這個帖子中找到Datepicker returning uncaught typeError: undefined 'currentDay' 請繼續Datepicker returning uncaught typeError: undefined 'currentDay'我將結束這篇文章，因爲沒有一致的行爲，您的建議和答案，即使在鏈接頁面中找到尚未。