Changed date is not fire when I am changing it in Bootstrap Date Range Picker

Issue

In this below code i want to update input selected date (by Bootstrap date range picker) in the from and to variable that are used in cashadvance query.
I think their is a problem in date Range Picker callback function.

Two variables range_to and range_from value is get in input tag with id=reservation and then get their values in from and to using isset($_GET[range]) but it doesn’t work.

CODE:payrol.php

<?php
    include('db.php');
        $range_to = date('m/d/Y');
        $range_from = date('m/d/Y', strtotime('-30 day', strtotime($range_to)));
    ?>
    
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    
    </head>
    <body>
    
    <div class="container-fluid">
    
    
     <div class="box-header with-border">
            <div class="pull-left"> 
                <input type="text" class="form-control pull-right col-sm-13" id="reservation" name="date_range" value="<?php echo (isset($_GET['range'])) ? $_GET['range'] : $range_from.' - '.$range_to; ?>">&nbsp;
            </div> 
      </div>
    
    
            <table>
            <thead>
                <tr>
                      <th>Employee ID</th>
                      <th>Gross</th>
                      <th>Cash Advance</th>
                      <th>Range</th>
                </tr>
            </thead>
        
        <?php                    
                        $to = date('Y-m-d');
                        $from = date('Y-m-d', strtotime('-30 day', strtotime($to)));
    
                        if(isset($_GET['range'])){
                          $range = $_GET['range'];
                          $ex = explode(' - ', $range);
                          $from = date('Y-m-d', strtotime($ex[0]));
                          $to = date('Y-m-d', strtotime($ex[1]));
                        }
                      /* **********Fetch Record From Employee ************ */
                      $sql = "SELECT * from employee";
    
                      $query = $con->query($sql);
                      $total = 0;
                      while($row = $query->fetch_assoc()){
                      $empid = $row['id'];
                      /* ********* Cash Advance Query********* */
                          $casql = "SELECT *, SUM(aamount) AS cashamount FROM advance WHERE id='$empid' AND adate BETWEEN '$from' AND '$to'";
                          
                          $caquery = $con->query($casql);
                          $carow = $caquery->fetch_assoc();
                          $cashadvance = $carow['cashamount'];
    
                          $gross = $row['Salary'] ;
    
                          
                          echo "
                            <tr>
                              <td>".$row['empid']."</td>
                              <td>".number_format($gross, 2)."</td>
                              <td>".number_format($cashadvance, 2)."</td>
                              <td>".$from."-".$to. "</td>
                            </tr>
                          ";
                      }
                      ?>
            </table>
        </div>
    
    
    <script>
    $(function(){
      $("#reservation").on('change', function(){
        var range = encodeURI($(this).val());
        window.location = 'payrol.php?range='+range;
      });
    });
    </script>
    
    <!--************Date Range Picker********************-->
    
    <script> 
    $(function() {
      //Date range picker
      $('#reservation').daterangepicker()
    
      $('input[name="date_range"]').daterangepicker({
        opens: 'left'
      }, function(start, end, label) {
        console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
      });
    });
    </script>
    
    

</body>
</html>

Solution

check in your browser if the object has the event binded. If not, you might need to wait that the document is ready before binding:

$(document).ready(function(){
     $("#reservation").on('change', function(){
        var range = encodeURI($(this).val());
        window.location = 'payrol.php?range='+range;
     });
 });

Answered By – Nickal

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.