Bootstrap Datepicker异常求助：图标错位与自动关闭失效

问题1：日历图标显示在输入框下方 #

原因 #

日期输入框和日历图标没有按Bootstrap input-group的规范结构组织，同时水平表单的栅格布局划分错误，导致图标无法与输入框同行展示。

修复步骤 #

1. 把日期输入框和图标容器包裹在input-group类的div中
2. 调整水平表单结构，将label和输入区域分别放入对应的栅格列内

问题2：autoclose自动关闭功能不生效 #

原因 #

1. 初始化脚本执行过早：代码放在<body>开头时，目标输入框还未加载完成，jQuery选择器无法匹配到元素
2. 输入框缺少id="datepicker"属性，导致$('#datepicker')选择器失效
3. 脚本引入顺序错误：jQuery需要在Bootstrap、datepicker脚本之前引入，后两者依赖jQuery运行

修复步骤 #

1. 将datepicker初始化脚本移到</body>标签前（或用$(document).ready()包裹）
2. 给日期输入框添加id="datepicker"属性
3. 调整脚本顺序：先引入jQuery，再引入Bootstrap，最后引入datepicker脚本

修复后的完整代码 #

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Add Job</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <link href="css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
        <link href="css/all.min.css" rel="stylesheet"/>
        <!-- 按依赖顺序引入脚本 -->
        <script src="/jquery-3.7.0.min.js"></script>
        <script src="/bootstrap.min.js"></script>
        <script src="/bootstrap-datepicker.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="/">Jobs</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link2</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/newjobform">Add Job</a>
                        </li>  
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">View</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="/jobslastten">Last jobs</a></li>
                                <li><a class="dropdown-item" href="/jobs">All jobs</a></li>
                                <li><a class="dropdown-item" href="/jobsnext">Next jobs</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="page-header" id="banner">
                <div class="row">
                    <div class="col-lg-8 col-md-7 col-sm-6">
                        <div class="row">
                            <div class="col-lg-6 col-md-7 col-sm-6">
                                <h1>Add a Job</h1>
                                <form action="/addjob" method="post" enctype="multipart/form-data" class="form-horizontal">
                                    <fieldset>
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">Date</label>
                                            <!-- 用input-group规范布局输入框和图标 -->
                                            <div class="col-lg-9">
                                                <div class="input-group">
                                                    <input type="text" placeholder="YYYY-MM-DD" class="form-control" id="datepicker">
                                                    <span class="input-group-append">
                                                        <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">Place</label>
                                            <div class="col-lg-9">
                                                <input type="text" class="form-control" name="place" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">Amount</label>
                                            <div class="col-lg-9">
                                                <input type="text" class="form-control" name="amount" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-lg-12 col-lg-offset-3">
                                                <button type="submit" class="btn btn-primary" name="button">Create</button>
                                            </div>
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 页面底部初始化，确保DOM已加载 -->
        <script type="text/javascript">
            $('#datepicker').datepicker({
                autoclose: true,
                format: 'yyyy-mm-dd',
                todayHighlight: true
            });
        </script>
    </body>
</html>

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