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


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.


        $range_to = date('m/d/Y');
        $range_from = date('m/d/Y', strtotime('-30 day', strtotime($range_to)));
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="">    
    <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;
                      <th>Employee ID</th>
                      <th>Cash Advance</th>
                        $to = date('Y-m-d');
                        $from = date('Y-m-d', strtotime('-30 day', strtotime($to)));
                          $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 "
                              <td>".number_format($gross, 2)."</td>
                              <td>".number_format($cashadvance, 2)."</td>
                              <td>".$from."-".$to. "</td>
      $("#reservation").on('change', function(){
        var range = encodeURI($(this).val());
        window.location = 'payrol.php?range='+range;
    <!--************Date Range Picker********************-->
    $(function() {
      //Date range picker
        opens: 'left'
      }, function(start, end, label) {
        console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));



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:

     $("#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.