Bootstrap-Datepicker不工作

Question

我正在尝试为我的RoR应用程序使用引导日期选择器，特别是this one。

我已经下载了js文件，并将其放在assets/javascripts文件夹中

然后，我创建了一个视图，以使其以最简单的方式工作，这就是它所具有的

<input type="text" value="02-16-2012" class="datepicker">

<script>
 $('.datepicker').datepicker({
     format: 'mm-dd-yyyy'
 });
</script>

它会自然地显示带有"02-16-2012“的文本字段，但它不会让小日历在点击时弹出。知道我错过了什么吗？

下面是我的application.js文件包含的内容：

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap

我的application.css flie有：

*= require_self
 *= require_tree .
 *= require bootstrap_and_overrides
 *= require bootstrap

控制台显示2个错误

Failed to load resource: the server responded with a status of 404 (Not Found)     http://127.0.0.1:3000/assets/default.css
Uncaught TypeError: Object [object Object] has no method 'datepicker'              test:113

另外，console.log($('.datepicker'))的输出是：

[input.datepicker, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: ".datepicker", jquery: "1.9.1", constructor: function…]

Answer 1

您的jQuery选择器缺少一个点(.)，您需要添加一个点来捕获所有以datepicker作为类的元素：

<input type="text" value="02-16-2012" class="datepicker">

<script>
 $('.datepicker').datepicker({
     format: 'mm-dd-yyyy'
 });
</script>

您可能希望仅在具有datepicker类的输入上“保护”您的datepicker部署：

$('input.datepicker').datepicker({ # match every input having 'datepicker' class
  format: 'mm-dd-yyyy'
});

也许可以尝试以下操作：

$(document).ready(function() {
    $('.datepicker').datepicker();
})

Answer 2

尝试添加日期选择器css。

Answer 3

文档中所需的标记(具体而言，您需要添加span.add-on和i.icon-th)：

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