JSFiddle - React, Tailwind, and code Playground

by imran44

HTML

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <div style="margin-left: 19px; font-size: 17px;">NetDue Date</div>
            <div class="row" id="id_row">

              <input type="text" name="datefilter" class="form-control mb-3" placeholder="Netdue_Date" id="Netdue_Date"
                required="" oninput="myFunction4()">
                </div>
                <table class="table table-striped border datatable" id='table_id'>
          <thead>
            <thead id="tablehead">
              <tr>

                <th>Region</th>
                <th> Area </th>
                <th>NetdueDate </th>
                <th>PaymentDate </th>
               </tr>
            </thead>

          <tbody>
 
             <tr >
              <td>US</td>
              <td> Northamerica</td>  
               <td>2021-10-26</td>
               <td>2021-10-23</td>
               </tr>
               
                <tr >
              <td>US</td>
              <td>Southamerica</td>  
               <td>2021-10-24</td>
               <td>2021-10-23</td>
               </tr>
               
              <tr >
              <td>US</td>
              <td> Northamerica</td>  
               <td>2021-10-22</td>
               <td>2021-10-23</td>
               </tr>
               
                 
              <tr>
              <td>Japan</td>
              <td>Tokyo</td>  
               <td>2021-10-21</td>
               <td>2021-10-23</td>
               </tr>
               </tbody>
            </table>

JavaScript

// daterangepicker

  $(function () {

    $('input[name="datefilter"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
        cancelLabel: 'Clear'
      }
    });

    $('input[name="datefilter"]').on('apply.daterangepicker', function (ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
    });

    $('input[name="datefilter"]').on('cancel.daterangepicker', function (ev, picker) {
      $(this).val('');
    });

  });
  
 
  /* select table date */
  
  
   function myFunction4() {

    var input, filter, table, tr, td, i;
    input = document.getElementById("datefilter");
    // input = document.getElementById("Payment_Term");  
    filter = input.value.toUpperCase();
    table = document.getElementById("table_id");
    tr = table.getElementsByTagName("tr");

    // Loop through all table rows, and hide those who don't match the search query
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[18];
      for (j = 0; j < td.length; j++) {
        let tdata = td[j];
        if (tdata) {
          if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
            break;
          } else {
            tr[i].style.display = "none";
          }
        }
      }

    }
  }