Bootstrap Date Range Picker修改日期时change事件未触发问题求助

• 重复初始化了两次id为reservation的日期选择器，事件绑定冲突导致逻辑失效
• 依赖的Bootstrap daterangepicker相关库（moment.js、daterangepicker样式和脚本）没有引入，插件本身无法正常运行
• 依赖input的change事件监听取值不可靠，应该用daterangepicker自带的选择回调处理页面跳转逻辑
• 直接使用未过滤的$_GET参数拼接SQL语句，存在严重SQL注入风险

首先在head部分引入缺失的依赖库，然后删除重复的日期选择器初始化代码，将页面跳转逻辑放到插件的选择回调中，同时增加SQL参数过滤避免注入风险，修复后完整代码如下：

<?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">
    <!-- 新增daterangepicker依赖 -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
</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'])) ? htmlspecialchars($_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 = trim($_GET['range']);
                $ex = explode(' - ', $range);
                if(count($ex) == 2){
                    // 校验日期格式合法性
                    $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********* */
                // 改用预处理语句避免SQL注入
                $casql = $con->prepare("SELECT *, SUM(aamount) AS cashamount FROM advance WHERE id=? AND adate BETWEEN ? AND ?");
                $casql->bind_param("iss", $empid, $from, $to);
                $casql->execute();
                $caquery = $casql->get_result();
                $carow = $caquery->fetch_assoc();
                $cashadvance = $carow['cashamount'] ?? 0;
                $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').daterangepicker({
    opens: 'left'
  }, function(start, end, label) {
    var range = encodeURI(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'));
    window.location.href = 'payrol.php?range='+range;
  });
});
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Tuba