Datatable datefilter loads correctly but throws Uncaught TypeError on date selection

Question

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)

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.

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.

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

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.

Edit 1: The table structure is created as follows,

<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

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();
           }
       });
});