Does not work datepicker (Bootstrap)?

问题

To be displayed in the input - calendar (datepicker (Bootstrap)). The problem is that in the former case, it appears:

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

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

But I have a modal window is created when you activate another form tag and added:

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

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

But in the second embodiment, datepicker is not activated and the calendar is not visible. And even conflicting something closes the modal window. Tell me what I did wrong and how to fix it? How to display the calendar in all fields modal form?

回答1:

Here is the working Jsfiddle for reference. It has modal popup and datepicker attached to input field.

$('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();

回答2:

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

This should work. The reason it would not appear before is because you are dynamically creating the modal, and the element selector function only works on elements that existed when the page first loaded.

来源：https://stackoverflow.com/questions/27336071/does-not-work-datepicker-bootstrap

标签

javascript

jquery

twitter-bootstrap

datepicker