<th içinde datepicker kullanımı yardım

27-12-2023, 11:01:30

www.42ajans.com

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>

27-12-2023, 11:09:47

#2

Zenta

<th id='datepicker'> gerine <th class='datepicker'> olarak değiştirip.

$( function() {
$( ".datepicker" ).datepicker();
$( "#format" ).on( "change", function() {
$( ".datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
} );

şeklinde yapar mısınız ID üzerinden değil de Class üzerinden yapın javascriptte ben genelde bu şekilde kullanıyorum çoklu elementlerde.

27-12-2023, 11:30:05

#3

42Ajans

www.42ajans.com

startakipci adlı üyeden alıntı: mesajı görüntüle

<th id='datepicker'> gerine <th class='datepicker'> olarak değiştirip.

$( function() {
$( ".datepicker" ).datepicker();
$( "#format" ).on( "change", function() {
$( ".datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
} );

şeklinde yapar mısınız ID üzerinden değil de Class üzerinden yapın javascriptte ben genelde bu şekilde kullanıyorum çoklu elementlerde.

Merhaba olmadı maalesef aşağıda sonuç mevcut ziyaret tarihinin altına otomatik bir input açıyor oraya tıklayınca açılmasını istiyorum yukarıdaki verdiğim kodu çıktı hali bu şekilde

28-12-2023, 00:41:54

#4

VEDANTA

Şunu bir denermisiniz:

<th><input type="text" id="datepicker" placeholder="Ziyaret Tarihi"></th>

28-12-2023, 11:26:11

#5

42Ajans

www.42ajans.com

VEDANTA adlı üyeden alıntı: mesajı görüntüle

Şunu bir denermisiniz:

<th><input type="text" id="datepicker" placeholder="Ziyaret Tarihi"></th>

maalesef olmadı açmıyor bir türlü datepicker'i

28-12-2023, 11:47:57

#6

VEDANTA

Datepicker'ın çalışması için jQuery UI'nin de dahil edilmesi lazım. Dahil etmediyseniz :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+R pHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73F SlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

28-12-2023, 12:54:10

#7

42Ajans

www.42ajans.com

VEDANTA adlı üyeden alıntı: mesajı görüntüle

Datepicker'ın çalışması için jQuery UI'nin de dahil edilmesi lazım. Dahil etmediyseniz :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+R pHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73F SlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Bunu da tanımladım olmadı uzaktan bağlantı versem müsaitseniz bakabilir misiniz acaba?

28-12-2023, 13:29:04

#8

VEDANTA

Şu anda bilgisayar yanımda değil.akşam vakti size özelden yazarım.müsaitseniz ve o zamana kadar cözülmediyse anydesk atarsınız.