无法使用引导日期选择器答案

【问题标题】：Unable to use bootstrap date picker无法使用引导日期选择器
【发布时间】：2014-04-05 19:43:52
【问题描述】：

我试图在输入区域添加Bootstrap date picker，但我无法对其进行配置：

我使用他们的demo page 生成代码并尝试了它，但似乎我遗漏了一些东西请帮我解决这个问题。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link href="../files/css/bootstrap.min.css" rel="stylesheet">
        <link href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet">

        <script src="../files/js/jquery.min.js"></script>
        <script src="../files/js/bootstrap.js"></script>
        <script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    </head>
    <body>
        <div class="input-group date">
            <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
        </div>

<script>
    $('#sandbox-container .input-group.date').datepicker({
        format: "yyyy/mm/dd",
        startDate: "2012-01-01",
        endDate: "2015-01-01",
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true
        });
</script>
    </body>
</html>

我还尝试将此链接用于css 和js：

【问题讨论】：

我正在使用 Bootstrap 3
http://eternicode.github.io/bootstrap-datepicker/js/bootstrap-datepicker.js 返回 404 错误
是的链接中的错误，但即使在正确的链接后也无法正常工作，请参阅更新
您是否尝试在<head> 中包含jquery bootstrap 等。看起来您正在尝试在包含 bootstrap 库之前调用 datepicker
试过了还是不行

标签： jquery twitter-bootstrap datepicker bootstrap-datepicker

【解决方案1】：

将脚本包含标签移到脚本上方，并从选择器中删除 #sandbox-container - 它不存在。之后它可以工作（使用正确的网址）......

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script>
    $('.input-group.date').datepicker({
        format: "yyyy/mm/dd",
        startDate: "2012-01-01",
        endDate: "2015-01-01",
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true
    });
</script>

jsfiddle example...

【讨论】：

【解决方案2】：

您只需要删除#sandbox-container，因为它不在您的代码中。

试试这个：

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link href="../files/css/bootstrap.min.css" rel="stylesheet">
        <link href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet">

        <script src="../files/js/jquery.min.js"></script>
        <script src="../files/js/bootstrap.js"></script>
        <script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    </head>
    <body>
        <div class="input-group date">
            <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
        </div>

<script>
    $('.input-group.date').datepicker({
        format: "yyyy/mm/dd",
        startDate: "2012-01-01",
        endDate: "2015-01-01",
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true
    });
</script>
    </body>
</html>

【讨论】：

bootstrap-datepicker 上的 404 错误包括什么？

【解决方案3】：

您在调用 jQuery、bootstrap.js 和 bootstrap-datepicker.js 之前调用了 datepicker 函数。如果你调试它，你会得到一个异常，告诉你“datepicker”没有定义。

你应该写：

    <script src="../files/js/jquery.min"></script>
    <script src="../files/js/bootstrap.js"></script>
    <script src="http://eternicode.github.io/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

    <script>
        $('#sandbox-container .input-group.date').datepicker({
             format: "yyyy/mm/dd",
             startDate: "2012-01-01",
             endDate: "2015-01-01",
             todayBtn: "linked",
             autoclose: true,
             todayHighlight: true
        });
    </script>

【讨论】：

再试一次，你之前没有看到部分答案。