issue in rendering jquery datetimepicker into a modal
<p>i am trying to show jquery datetimepicker into a bootstrap modal..</p>

<p>HTML:</p>

<pre><code>&lt;div class="modal fade" id="availability_modal" role="dialog"&gt;
&lt;div class="modal-dialog"&gt;
    &lt;!-- Modal content--&gt;
    &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;
                &amp;times;
            &lt;/button&gt;
            &lt;h4 class="modal-title"&gt;View availability of %SUPP_NAME%&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
            &lt;div id="availability_calender"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;
                Close
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>and the jquery i used is...</p>

<pre><code>$(document).on("click","#open_availability",function(e){
    setTimeout(function(){
        jQuery('#availability_calender').datetimepicker({
         formatDate: "d.m.Y", 
         inline:true,
         timepicker:false,
         highlightedDates: [
            "29.02.2016,Meeting with Pete", 
            "24.02.2016,Christmas Eve,xdsoft_highlighted_mint", 
            "25.02.2016,Christmas Day,xdsoft_highlighted_mint", 
            "26.02.2016,Thanksgiving"
         ],
         highlightedPeriods: [
            "27.04.2015,08.05.2015,Business trip", 
            "11.07.2015,31.08.2015,Summer holiday 2015,xdsoft_highlighted_mint", 
            "21.12.2015,01.01.2016,Christmas holiday 2015"
         ]
        });
    },1000);

});
</code></pre>

<p>it works fine when i am not rendering into a modal...
any help is appreciated</p>