создать datatable header, выбрав datepickers

Question

Я попытался создать dataTable с динамическим столбцом для выбора из & to datepickers.

колонка должна содержать FromDate между датами и Todate

JS-код

$("#from").datepicker(); 
$("#to").datepicker(); 

var strTopHead='<th rowspan="2">Name</th><th rowspan="2">Code</th><th rowspan="2">code</th>'; 

$('#getBetween').on('click', function() { 

    $('#trTopHead').empty(); 
    $('#trBottomHead').empty(); 
    var start = $("#from").datepicker("getDate"), 
     end = $("#to").datepicker("getDate"), 
     currentDate = new Date(start), 
     between = [] 
    ; 
    if(start!=null&&end!=null){ 
    while (currentDate <= end) { 
     between.push(new Date(currentDate).toJSON().substring(0,10)); 
     currentDate.setDate(currentDate.getDate() + 1); 
    } 

    // $('#results').html(between.join('<br> ')); 
    for(var i=0;i<between.length;i++){ 
     strTopHead=strTopHead+'<th colspan="3">'+between[i]+'</th>'; 

    $('#trBottomHead').append('<th>C</th><th>D</th>    <th>E</th>'); 
     $('table>tbody').append('<tr><td>Tiger Nixon</td>    <td>System Architect</td>    <td>$320,800</td>    <td>Edinburgh</td>    <td>5421</td>    <td>t.nixon@datatables.net</td></tr>'); 
    } 
      $('#trTopHead').append(strTopHead); 

     $('#example').dataTable({ 
     "scrollY":  "200px", 
     "scrollCollapse": true 
     }); 
    } 
}); 

здесь отображает только одну дату в качестве колонки

I tried like this

Answer 1

я сделал некоторые изменения ваш код

var date= new Date();//changes 
$("#from").datepicker(); 
$("#to").datepicker(); 

$("#from").val($.datepicker.formatDate("mm/dd/yy",date));//changes 
$("#to").val($.datepicker.formatDate("mm/dd/yy",date));//changes 


$('#getBetween').on('click', function() { 
    var strTopHead=''; 
    $('#trTopHead').empty(); 
    $('#trBottomHead').empty(); 
    strTopHead=strTopHead+ '<th rowspan="2">Name</th><th rowspan="2">Code</th><th rowspan="2">code</th>'; 
    var start = $("#from").datepicker("getDate"), 
     end = $("#to").datepicker("getDate"), 
     currentDate = new Date(start), 
     between = [] 
    ; 
    if(start!=null&&end!=null){ 
    while (currentDate <= end) { 
     currentDate.setDate(currentDate.getDate() + 1);//changes 
     between.push(new Date(currentDate).toJSON().substring(0,10));//changes 

    } 
    var strTopHeadDates=''; 
    // $('#results').html(between.join('<br> ')); 
    for(var i=0;i<between.length;i++){ 
     strTopHeadDates=strTopHeadDates+'<th colspan="3">'+between[i]+'</th>'; 

    $('#trBottomHead').append('<th>C</th><th>D</th>    <th>E</th>'); 
     $('table>tbody').append('<tr><td>Tiger Nixon</td>    <td>System Architect</td>    <td>$320,800</td>    <td>Edinburgh</td>    <td>5421</td>    <td>t.nixon@datatables.net</td></tr>'); 
    } 
     strTopHead=strTopHead+strTopHeadDates; 
      $('#trTopHead').append(strTopHead); 

    $('#example').dataTable(); 
     console.log($("#from").val()); 
    } 
}); 

try this code