如何从HTML文件调用JS文件中的jQuery函数？

我来帮你梳理下问题并给出解决方案，你遇到的核心问题是脚本加载顺序错误、遗漏了关键依赖文件，以及对jQuery DOM ready机制的理解偏差，下面一步步来修正：

1. 先修正脚本加载顺序与依赖 #

你当前的脚本加载顺序是错误的，jQuery必须作为第一个加载的脚本（因为Bootstrap和Bootstrap-datepicker都依赖jQuery），而且你还遗漏了Bootstrap-datepicker的JS文件！

修正后的HTML头部资源引用应该是这样：

<!-- CSS 样式文件 -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" rel="stylesheet">

<!-- JS 脚本文件：顺序不能乱 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="calendar.js"></script>

2. 简化calendar.js中的代码 #

你原来的两个$(function() {...})其实是$(document).ready()的简写，这个函数会在DOM完全加载完成后自动执行，不需要你手动调用。可以把两个初始化逻辑合并到同一个ready函数里，更简洁：

// calendar.js 内容
$(function() {
    // 初始化第一个日期选择器
    $('#datepicker').datepicker({
        format: "dd/mm/yyyy",
        autoclose: true,
        todayHighlight: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        orientation: "button"
    });

    // 初始化第二个日期选择器
    $('#datepicker2').datepicker({
        format: "dd/mm/yyyy",
        autoclose: true,
        todayHighlight: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        orientation: "button"
    });
});

3. 移除HTML中多余的onclick事件 #

你添加的onclick="datumEins()"和onclick="datumZwei"完全是多余的：

• Bootstrap-datepicker已经自动绑定了输入框和日历图标的点击事件，点击它们就会弹出选择器
• 你甚至没有定义datumEins和datumZwei函数，而且datumZwei还少了括号，就算有函数也不会触发

修正后的HTML结构：

<!-- Startdatum -->
<div class="container">
    <div class="row">
        <h2>Startdatum</h2>
    </div>
    <div class="row">
        <div class='col-sm-6'>
            <form>
                <div class="form-group">
                    <div class='input-group date' id='datepicker'>
                        <input type='text' id="datum1" class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Enddatum -->
<div class="container">
    <div class="row">
        <h2>Enddatum</h2>
    </div>
    <div class="row">
        <div class='col-sm-6'>
            <form>
                <div class="form-group">
                    <div class='input-group date' id='datepicker2'>
                        <input type='text' id="datum2" class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

最后检查要点 #

• 确保calendar.js的文件路径正确（和HTML文件在同一目录，或者路径写绝对/相对路径）
• 打开浏览器控制台（F12），如果有报错可以根据提示排查（比如找不到jQuery、datepicker方法不存在等）

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