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; ?>">
</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>
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;
});
});