Bootstrap日期选择器下拉列表未删除 - Bootstrap datepicker dropdown not dropping

我试过删除和添加一些东西，但下拉列表仍然无法删除。我不确定问题出在哪里。我添加了较少的文件，其中包括下拉列表，但仍然没有更改。不过，文本框正在工作。以下是代码的样子

    <html>
    <head><link rel="stylesheet" type="text/css" media="screen"
              href="css/datepicker3.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet/less" href="less/dropdowns.less">
    <link rel="stylesheet/less" href="less/sprites.less">
    </head>
    <body>
<div class="input-group date" data-date-format="dd-mm-yyyy">
            <input type="text" class="form-control" name="date"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
    </div>
    <script type="text/javascript">

        $('.input-group.date').datepicker({
                 changeMonth: true;
                 changeYear: true;
        });
        </script>
    <script type="text/javascript"
            src="js/jquery-1.11.2.min.js">
    </script>
    </script>
    <script type="text/javascript"
            src="js/bootstrap.js">
    </script>
    <script type="text/javascript"
            src="js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
                src="js/bootstrap-datepicker.js">
    </script>
    <script type="text/javascript"
            src="js/bootstrap-datepicker.en-GB.js">
                </script>
    </body>
</html>

在加载jquery和bootstrap.js之前执行自定义javascript方法。只有在您的方法执行之前加载了它们的库类时，您的自定义方法才能工作。所以，你的代码必须是这样的：

    <html>
        <head><link rel="stylesheet" type="text/css" media="screen"
                  href="css/datepicker3.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet/less" href="less/dropdowns.less">
        <link rel="stylesheet/less" href="less/sprites.less">
        </head>
        <body>
    <div class="input-group date" data-date-format="dd-mm-yyyy">
                <input type="text" class="form-control" name="date"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
        </div>
        <script type="text/javascript"
                src="js/jquery-1.11.2.min.js">
        </script>
        </script>
        <script type="text/javascript"
                src="js/bootstrap.min.js">
        </script>
        <script type="text/javascript"
                    src="js/bootstrap-datepicker.js">
        </script>
        <script type="text/javascript"
                src="js/bootstrap-datepicker.en-GB.js">
                    </script>
    <script type="text/javascript">
    $('document').ready(function(){
      $('.input-group.date').datepicker({
changeMonth: true,
     changeYear: true,
});
    });
            </script>
        </body>
    </html>

$('.input-group.date').datepicker({changeMonth: true,
     changeYear: true});

<!DOCTYPE html>
    <html>
            <head>
    <script src="//code.jquery.com/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
              <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet" type="text/css" />
              <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet" type="text/css" />
            </head>
            <body>
        <div class="input-group date" data-date-format="dd-mm-yyyy">
                    <input type="text" class="form-control" name="date"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
            </div>
            
            <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.min.js"></script>
        
            </body>
        </html>

此外，在日期选择器选项中没有"；"，而是"，"，正如@Sachi Tekina所说，不需要两次加载bootstrap。

尝试

 $('.date').datepicker({
             changeMonth: true;
             changeYear: true;
    });

参考http://runnable.com/UmOlOZbXvZRqAABU/bootstrap-datepicker-example-text-input-with-specifying-date-format2

您在导入js文件之前调用了datepicker函数。同时删除下面的行，因为您已经在调用缩小的版本。

<script type="text/javascript" src="js/bootstrap.js">
    </script>

<script type="text/javascript" src="js/bootstrap.js"></script> 上方还有一个额外的</script>标签

这样试试：

<html>
    <head><link rel="stylesheet" type="text/css" media="screen"
              href="css/datepicker3.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet/less" href="less/dropdowns.less">
    <link rel="stylesheet/less" href="less/sprites.less">
    </head>
    <body>
<div class="input-group date" data-date-format="dd-mm-yyyy">
            <input type="text" class="form-control" name="date"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
    </div>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js">
    </script>

    <script type="text/javascript" src="js/bootstrap.min.js">
    </script>
    <script type="text/javascript" src="js/bootstrap-datepicker.js">
    </script>
    <script type="text/javascript" src="js/bootstrap-datepicker.en-GB.js">
     </script>
      <script type="text/javascript">
       $(document).ready(function(){
         $('.input-group.date').datepicker({
                 changeMonth: true;
                 changeYear: true;
         });
       });
        </script>
    </body>
</html>