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) 

は この問題はよく知られているを調べます。たとえば、datepicker要素IDが "#datepickerStart"の場合、指定されたページに1回だけ読み込まれます。 2つのDOM要素に同じ要素IDがある場合、上記のエラーがスローされます。

Jquery Datatables Date Range Filterで示されているように、主に個々のフィールド検索に使用しました。ブラウザでデベロッパーツールを調べると、#datepickerStartという2つのDOMが生成されているのがわかりました。 1つは検索エリアにあり、もう1つはテーブルエリアの最後にあります。

これらの重複するテーブルの列が次のコードによってどのように生成されるのか混乱します。

$('#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+'" />'); 
    } 
}); 

は、私が何かを逃してくださいまたは私はそれを間違った方法を実行します。これはコードの下に注入するか、検索テキストボックスのために生のHTMLを入れたときにどちらかが起こることを知ってください！私は、データテーブルを2回初期化しなかったか、またはdatePicker要素を2回作成していないかをクロスチェックしました。

どこが間違っているか分かりやすく教えてください。前もって感謝します。

編集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にHTMLを入れていない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'のすべてのご提案や回答を続けてください、この記事に記載されています。ここで