Datepicker inside modal

[lucascurti]

I'm trying to use a Datepicker inside a Bootbox modal but the problem is that the datepicker won't show the calendar inside the modal, but it works outside.

Add

On the modal I'm loading the content of a hidden DIV using Bootbox:

$('.add_date_btn').on('click', function () {
bootbox.dialog({
message: $('#add_class_form').html(),
title: "Add Class",
buttons: {
cancelar: {
label: "Cancelar",
className: "btn-default"
}
}
});
}); //End click

A sample is here: http://jsfiddle.net/4EjSW/

On my site the DIV #add_class_form is set to "display:none" but on the sample code I left it there so anyone can confirm it's actually working when it's outside the modal.

Any idea how to fix this? It's really driving me crazy...

Thanks in advance!

[tarlepp]

I made simple solutions for your problem see http://jsfiddle.net/4EjSW/2/

[lucascurti]

Thanks so much tarlepp! Your solution is working perfectly.

To be honest, I'm kind of new to jQuery and Bootstrap. I've been reading the documentation for the last couple of hours and I can't realize what did the trick on your code. I know it has something to do with using clone() vs html() but not sure what is the difference between them.
If you don't mind, can you explain a bit how did you get to the solution and what was the problem on my code? Also, do you happen to know what's the reason that now the calendar is not appearing on the datepicker outside the modal? It's not that I need it to be there since that DIV will be hidden but it would be good to know why that's happening.

Thanks again. I owe big time!

[tarlepp]

I added some comments to jsfiddle example that you can understand the flow better http://jsfiddle.net/4EjSW/4/

[lucascurti]

Awesome. Thanks!