4

我试图在输入区域添加Bootstrap 日期选择器，但我无法对其进行配置：

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

<!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：

4

3 回答 3

6

将脚本包含标签移到脚本上方，然后#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示例...

于 2014-03-04T10:35:29.803 回答
1

您只需要删除#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>
于 2014-03-04T10:43:48.117 回答
0

在调用 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>
于 2014-03-04T10:28:34.317 回答