Bootstrap-Datepicker не работает

Question

Я пытаюсь использовать bootstrap-datepicker для своего приложения RoR, в частности this one.

Я скачал файл JS и поместить его в активах/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

Попробуйте добавить datepicker css.

Answer 2

Необходимая разметка из документации (в частности, необходимо добавить span.add-на и i.icon-й):

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

Answer 3

Ваш селектор 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 4

Чтобы получить CSS и Javascript правильно упаковано в трубопроводе рельсы активов, я рекомендую вам использовать этот драгоценный камень: https://github.com/lubieniebieski/bootstrap-datetimepicker-rails