Bootstrap Datepicker无法正常工作

Question

我在我的应用程序中包含了bootstrap datepicker，并且css似乎被搞砸了，这意味着如果我在月份中选择，所有月份都显示为内联，而不像演示中显示的样式。我已经更新了jquery和所有内容，但似乎没有任何工作。以下是它的外观图：

我的代码，

<link rel="stylesheet" href="http://localhost/htdocs/fd1/css/fullcalendar.css" />
<link rel="stylesheet" href="http://localhost/htdocs/fd1/css/fullcalendar.print.css" media='print'/>
<!-- <script type="text/javascript" src="http://localhost/htdocs/fd1/js/jquery-ui-1.10.2.custom.min.js"></script> -->
<script type="text/javascript" src="http://localhost/htdocs/fd1/js/fullcalendar.min.js"></script>
<script type="text/javascript" src="http://localhost/htdocs/fd1/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://localhost/htdocs/fd1/css/bootstrap.css" />
<link rel="stylesheet" src="http://localhost/htdocs/fd1/css/jquery-dtpicker.css" />
<!-- <script type="text/javascript" src="http://localhost/htdocs/fd1/js/jquery.js"></script> -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/htdocs/fd1/js/jquery-dtpicker.js"></script>
<script type="text/javascript" src="http://localhost/htdocs/fd1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost/htdocs/fd1/css/bootstrap-responsive.css"></script>
<!--<script type="text/javascript" src=""></script>-->
<script type="text/javascript" src="http://localhost/htdocs/fd1/js/jquerydatatables.js"></script>
<script type="text/javasctipt" src=http://localhost/htdocs/fd1/js/bootstrap-alert.js></script>

身体：

<div class="control-group">
        <label class="control-label">Start Date:</label>
        <div class="controls"> <input type="text" id="dp1" >
    </div>
<script type="text/javascript">

    $(function(){
                $('#dp1').datepicker();
            });
    </script>

我一直在做很多小道但我无法提出解决方案。 提前致谢。