我怎样才能使我的 Bootstrap 日期选择器正常工作，是否有 "official" Bootstrap 3 日期选择器？

Question

我有一个使用 Bootstrap 3 和 jQuery 构建的网络应用程序。我想添加一个日期选择器。我查看了官方 Bootstrap 3 website here 但是组件下没有日期选择器（除非我错过了？）。

我用谷歌搜索并找到了这个...

https://uxsolutions.github.io/bootstrap-datepicker/?#sandbox

我尝试使用他们的代码示例将此日期选择器添加到我的应用程序中，但它不起作用...当我单击该小部件时没有弹出日期选择器

<script>
    $('#sandbox-container .input-group.date').datepicker({
        autoclose: true,
        todayHighlight: true
    });
</script>

<div class="input-group date">
      <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

我想我缺少一些导入所以我添加了这些 link/script 行......但它仍然不起作用......

<!-- what I already had -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/juliet/resources/juliet.css">

<!-- new for the Date Picker widget -->
<link id="bsdp-css" href="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>

问题：

我缺少什么 links/script 导入？并且（除了在这里询问）当您尝试添加第 3 方小部件时，程序员如何确定缺少哪些行？

还有...

我注意到有几个不同的小部件被称为 "bootstrap-datepicker" ...我想这是一个通用名称。

有没有一个地方可以找到 "official" Bootstrap 3 日期选择器？还是您几乎必须下载不同的软件才能找到适合您的软件？

感谢您的任何建议，因为我真的可以使用一些建议！

更新了解决方案：

感谢评论者@RK_oo7 的指点，我明白了发生了什么。

这是我的完整示例代码...

<!DOCTYPE html>
<title>Date Picker Test 3</title>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/juliet/resources/juliet.css">
    <link id="bsdp-css" href="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet">
    <script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
</head>


<script>
    $(document).ready(function() {

        $('#sandbox-container .input-group.date').datepicker({
            autoclose : true,
            todayHighlight : true
        });

    });
</script>

<body>

    <div id="sandbox-container">
        <div class="input-group date">
            <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
        </div>
    </div>

</body>

Answer 1

请将您的日期选择器jquery代码放入文档就绪状态

$( document ).ready(function() {
// your picker initialization here
});

我怎样才能使我的 Bootstrap 日期选择器正常工作，是否有 "official" Bootstrap 3 日期选择器？

How can I make my Bootstrap Date Picker work and is there an "official" Bootstrap 3 Date Picker?

twitter-bootstrap

twitter-bootstrap-3