Merhaba app script de bir rapor yapmaya çalışıyorum. Ancak datepicker kullanımını aktif edemedim çok bilgim yok yardımcı olabilecek varmıdır? displayheader += "<th id='datepicker'> Ziyaret Tarihi </th>"; kodunda id de tanımlıyorum ama olmuyor
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.widgets.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/extras/jquery.tablesorter.pager.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/jquery.tablesorter.pager.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.metro-dark.min.css" />
<link rel="stylesheet" href="https://mottie.github.io/tablesorter//css/filter.formatter.css">
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-filter-formatter-jui.js"></script>
</head>
<body>
<h1>Pazarlama Rapor Kontrol</h1></hr><br>
<div id="rowdata"></div>
<script>
$( function() {
$( "#datepicker" ).datepicker();
$( "#format" ).on( "change", function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
} );
$( document ).ready(function() {
getData();
});
function getData()
{
google.script.run.withSuccessHandler(function(ar)
{
console.log(ar);
var displayfooter = "<tfoot>";
displayfooter += "<tr class=\"dark-row\">";
displayfooter += "<th colspan=\""+ar[0].length+"\">";
displayfooter += "<div class=\"pager\">";
displayfooter += "<button type=\"button\" class=\"first\" ><<</button>";
displayfooter += "<button type=\"button\" class=\"prev\"><</button>";
displayfooter += "<span class=\"pagedisplay\"></span>";
displayfooter += "<button type=\"button\" class=\"next\">></button>";
displayfooter += "<button type=\"button\" class=\"last\">>></button>";
displayfooter += "<select class=\"pagesize\" title=\"Select page size\">";
displayfooter += "<option value=\"10\">10</option>";
displayfooter += "<option value=\"20\">20</option>";
displayfooter += "<option value=\"30\">30</option>";
displayfooter += "<option value=\"40\">40</option>";
displayfooter += "</select>";
displayfooter += "<select class=\"gotoPage\" title=\"Select page number\"></select>";
displayfooter += "</div>";
displayfooter += "</th>";
displayfooter += "</tr>";
displayfooter += "</tfoot>";
var displaybody = "<tbody>";
ar.forEach(function(item, index)
{
if(index == 0)
{
displayheader = "<thead>";
displayheader += "<tr>";
displayheader += "<th id='datepicker'> Ziyaret Tarihi </th>";
displayheader += "<th> Ziyaret Saati </th>";
displayheader += "<th class='filter-select filter-exact' data-placeholder='Personel Seçin'> Personel Seçimi </th>";
displayheader += "<th> Müşteri Cari İsmi </th>";
displayheader += "<th> Müşteri Telefon Numarası </th>";
displayheader += "<th> Müşteri Yetkilisi İsmi </th>";
displayheader += "<th> Firma Yetkilisi Ünvan </th>";
displayheader += "<th> Bölge </th>";
displayheader += "<th> Değerlendirme </th>";
displayheader += "<th> Karar </th>";
displayheader += "<th> Kartvizit Resmi </th>";
displayheader += "</tr>";
displayheader += "</thead>";
}
else if(index > 0)
{
displaybody += "<tr>";
displaybody += "<td>"+item[0]+"</td>";
displaybody += "<td>"+item[1]+"</td>";
displaybody += "<td>"+item[2]+"</td>";
displaybody += "<td>"+item[3]+"</td>";
displaybody += "<td>"+item[4]+"</td>";
displaybody += "<td>"+item[5]+"</td>";
displaybody += "<td>"+item[6]+"</td>";
displaybody += "<td>"+item[7]+"</td>";
displaybody += "<td>"+item[8]+"</td>";
displaybody += "<td>"+item[9]+"</td>";
displaybody += "<td>"+item[10]+"</td>";
displaybody += "</tr>";
}
});
displaybody += "</tbody>";
var displayTable = '';
displayTable += "<table id=\"mainTable\" class=\"tablesorter\" >";
displayTable += displayheader;
displayTable += displayfooter;
displayTable += displaybody;
displayTable += '</table>';
document.getElementById("rowdata").innerHTML = displayTable;
$("#mainTable").tablesorter({
theme: 'metro-dark',
sortList: [[0,0]],
widthFixed: true,
widgets: ['zebra', 'columns', 'filter']
})
.tablesorterPager({
// target the pager markup - see the HTML block below
container: $(".pager"),
output: '{startRow} to {endRow} ({totalRows})'
});
}).getRecords();
}
</script>
</body>
</html>