javascript - Bootstrap 日期选择器下拉菜单不下降

标签 javascript php html twitter-bootstrap

我尝试删除和添加内容,但下拉菜单仍然不会下降。我不确定问题是什么。我添加了较少的文件,其中包括下拉列表,但仍然没有任何改变。不过文本框正在工作。代码如下所示

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

最佳答案

您自定义的 javascript 方法将在 jquery 和 bootstrap.js 加载之前执行。仅当其库类在您的方法执行之前加载时,您的自定义方法才会起作用。因此,您的代码必须如下所示:

    <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 两次。

关于javascript - Bootstrap 日期选择器下拉菜单不下降,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28623041/

相关文章:

php - 通过单击 anchor 标记在 Firefox 中打开网页

javascript - 无法隐藏字段并根据选择填充字段

html - 如何从网站上的链接打开 native iOS 应用程序(日历、笔记...)?

html - Bootstrap 动态调整行高

javascript - 重定向到网页没有发生

javascript - 将文本区域中的值连接到另一个位置

PHP & MySQL 连接更安全

javascript - 重新定义的 toString 的 getOwnPropertyDescriptor 应该是未定义的

javascript - 通过 javascript 清除浏览器缓存和历史记录并加载最新的 js 文件

php - 使用 ./configure 构建 php5.3 而不是创建 Makefile