Using datepicker in Bootstrap modal

[lcsqlpete]

I have been using datepicker successfully in an application which I am now redesigning. The datepicker input field used to be in a "normal" html page, the redesign has it in a Bootstrap modal.

When I click on the datepicker input field in the modal, it acts like a standard text field and the datepicker popup does not appear.

The html for the field is:

<input class="form-control input-sm" id="ConcertDate" name="ConcertDate" type="text" data-provide="datepicker" data-date-autoclose="true" required style="width:100px;" value="11/30/2017">

This is exactly the same code as in the original version of the application. The javascript console shows that the correct css and js files are loaded.

This field along with several others is inserted into the DOM when the user clicks the button to open the modal so it is not there when the page loads initially. This is done with js on the show.bs.modal event for the modal. The js includes a check for the namespace being bs.modal to avoid the issue reported elsewhere when using datepicker in a modal.

I tried the following js to bind the datepicker to the field by referencing the id of the modal body:

('#profile-modal-body').on('click','#ConcertDate', function(){ $("#ConcertDate").datepicker(); });

Still didn't work but I'm not confident enough in my js skills to know if I'm doing that correctly or not and also if that's too late for the binding to take effect.

Any help much appreciated.

Pete

[lcsqlpete]

I'm now thinking the datepicker is displaying but it's hidden behind the modal. I can fix that with an appropriate z-index value but how do I apply that attribute to the datepicker?

[4lp]

I too had some issues getting the datepicker to work in a modal - have you checked the thread for #978 ?

[lcsqlpete]

Yes thanks, I did see that thread and implemented the namespace check recommended in it but I think this is a different problem - I can't get the datepicker to display at all.