Bootstrap 3的日期选择器无法使用

Question

Bootstrap 3的日期选择器无法使用

jquerytwitter-bootstraptwitter-bootstrap-3

5

在这里尝试使用日期选择器：http://bootstrap-datepicker.readthedocs.org/en/latest/

我对jquery的经验不是很丰富，但我肯定是漏掉了什么，因为它从未起作用。这是我的HTML代码，所有CSS和JS文件都在各自的位置上，没有找不到文件的问题。我相信我漏掉了一些简单的东西，但我没有看到它，直接从提供的示例中复制和粘贴。请告诉我您的想法。

<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/datepicker.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
          <form id="main">
            <input type="text">
          </form>
          <script>
           $('#main input').datepicker({
             });
          </script>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>    
  </body>
</html>

- watyeag

1

你的错误控制台有任何消息吗？ - Phil

1

首先，删除第一个</html>标签之后的所有内容。这些都是重复的。 - nathan hayfield

1

你需要将 JavaScript 包装在 onready 函数中。这是因为在使用 JavaScript 之前，你必须等待它完成加载。或者按照 Jasen 的建议，在你的脚本之前加载 jQuery 库。 - nathan hayfield

2

将您的第一个脚本块移动到 </body> 前的最后一个脚本块。 - Jasen

@Jasen是正确的。你在定义datepicker方法之前调用了它。这里有一个可工作的演示 - http://jsfiddle.net/rm3z6/ - Phil

谢谢大家，现在运行正常！ - watyeag

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jasen · Accepted Answer

你的代码存在一些问题

需要添加文档就绪处理程序
在包含库后，需要将脚本放在最后
存在重复的脚本标记

以下是使它正常工作所需要的内容

<!DOCTYPE html>
<html>
<head>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/datepicker.css" rel="stylesheet" />
</head>
<body>

<form id="main">
    <input type="text" />
</form>

<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script>
    $(document).ready(function() {
        $("#main input").datepicker();
    });
</script>
</body>
</html>