DateTimePicker in Jquery DataTable

Question

I have a Jquery DataTable and each row have a Calender. When i change Date in any row, value is changed in first row.

Here is my Code.

showCalender = function () {
        var now = new Date();
            $("#TimeTable tr input.Date").val(now.format('dd/mm/yyyy'))
                .datepicker({
                    dateFormat: 'dd/mm/yy',
                    changeYear: true,
                    changeMonth: true,
                    showButtonPanel: true,
                    yearRange: "-100:+0",
                    autoSize: true
                });
    };

DataTable Code

    $('#TimeTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bServerSide": true,
        "sAjaxSource": '/forms/exam/ExamTimeTable.aspx/subjectgetallbyclass?ClassId=' + ClassId,
        "fnServerData": function (sSource, aoData, fnCallback) {

            $.ajax({

                "type": "GET",
                "dataType": 'json',
                "contentType": "application/json; charset=utf-8",
                "url": sSource,
                "data": aoData,
                "success": function (data) {
                    fnCallback(data.d);
                }
            });
        },
        "aoColumns": [
            {
                "mDataProp": "SubjectName",
                "bSearchable": false,
                "bSortable": false,

            },
            {
                "mDataProp": "Date",
                "bSearchable": false,
                "bSortable": false,
                "fnRender": function (oObj) {
                    return '<input type ="text" id="Date" style="width:100px;" class="Date" value=' + commonStartup.convertDate4Reports(oObj.aData["Date"]) + '></input>' +
                        '<input type ="hidden" id="SubjectId" value= ' + oObj.aData["SubjectId"] + ' class="subjectId"></input>';
                }
            }
        ]
    });
        setTimeout('showCalender()', 1000);

};

Answer 1

As same ids for multiple elements on a single page is refered as invalid markup writing, so remove the id attribute from the inputs or change the ids for every input by appending some numbers:

id="Date" // needs to be removed.

from fnRender method:

    return '<input type ="text" style="width:100px;" class="Date" value=' + 
             commonStartup.convertDate4Reports(oObj.aData["Date"]) + '></input>' +
           '<input type ="hidden" id="SubjectId" value= ' + oObj.aData["SubjectId"] + 
           'class="subjectId"></input>';

if this happens (same ids for multiple elems) only first id gets the effect of change.