Question

我是一个完整的新手，一直在努力成功实施Bootstrap Datepicker。

我得到的是带有“12-02-2013”值的输入字段;点击该字段后没有下拉列表。我已经在stackoverflow和其他地方查看了其他示例，但我还没有找到答案。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/bootstrap-datepicker.es.js"></script>
<link rel="stylesheet" type="text/css" href="css/datepicker.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<title>Datepicker</title>
</head>

<body>

<div class="input-append date" id="dp3" data-date-format="dd-mm-yyyy">
    <input class="span2" size="16" type="text" value="12-02-2013" readonly><span class="add-on"><i class="icon-th"></i></span>
</div>   

    <script>
        $('#dp3').datepicker();
    </script>

</body>
</html>

Answer 1

检查脚本的顺序， bootstrap.js应该在jQuery.js library之后

<link rel="stylesheet" type="text/css" href="css/datepicker.css" />
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap- combined.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/bootstrap-datepicker.es.js"></script>

此外，如果您想要datepicker的 textbox ，那么

从div中删除id并将其添加到输入标记

<div class="input-append date"  data-date-format="dd-mm-yyyy">
    <input class="span2" id="dp3" size="16" type="text" value="12-02-2013" readonly><span class="add-on"><i class="icon-th"></i></span>
</div>

$('#dp3').datepicker();

<link href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<div class="input-append date" data-date-format="dd-mm-yyyy">
  <input class="span2" id="dp3" size="16" type="text" value="12-02-2013" readonly><span class="add-on"><i class="icon-th"></i></span>
</div>

Bootstrap Datepicker - 下拉列表不是......丢弃

1 个答案: