Не работает datepicker (Bootstrap)?

Question

Отображается во входном календаре (datepicker (Bootstrap)). Проблема заключается в том, что в первом случае, по-видимому:

<input type="text" class="datepicker_goal" data-provide="datepicker" value="Period"> 

$('.modal-body input[data-provide="datepicker"]').datepicker(); 

Но у меня есть модальное окно создается, когда вы активируете другой тэг формы и добавил:

<input type="text" class="datepicker_goal_modal" data-provide="datepicker_modal" value="Period"> 

$('.modal-body input[data-provide="datepicker_modal"]').datepicker(); 

Но во втором варианте, datepicker не активирован, и календарь не отображается. И даже конфликтующее что-то закрывает модальное окно. Скажите, что я сделал неправильно и как это исправить? Как отображать календарь во всех полях модальной формы?

Answer 1

Работает Jsfiddle для справки. У него есть модальное всплывающее окно и датапикер, прикрепленное к полю ввода. ("Datepicker_goal_modal").

$('input[data-provide="datepicker"]').datepicker();  

// Append New Input field 
$("div.modal-body").append(" <input type=\"text\" class=\"datepicker_goal_modal\" data-provide=\"datepicker_modal\" placeholder=\"Period\">") 

// After appending, call datepicker on input field. 
$('.modal-body input[data-provide="datepicker_modal"]').datepicker(); 

Answer 2

$('body').on('focus', '.datepicker_goal_modal', function(){ 
    $(this).datepicker(); 
});​ 

Это должно сработать. Причина, по которой он не появлялся раньше, заключается в том, что вы динамически создаете модальный, а функция селектора элементов работает только с элементами, которые существовали при первой загрузке страницы.