Bootstrap datepicker issue in modal

Question

I am using bootstrap modal having a form with one field of date. Initially i was facing issue with the date, But one way or the other i managed to display the bootstrap datepicker. But there is a little issue. Actually when i click on the date text box it does't work for the first attempt and then i have to click on some other text boxes and then click back again in the date text box then it works. Here is my code

Modal having date text box

<input onClick="display_date()" size="16" type="text" value="" id="expiry_date" data-date="" data-date-format="dd-mm-yyyy" readonly>

Js file

function display_date(){
$('#expiry_date').datetimepicker({
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0
});

}

I also tried to use js code in modal without function given below but it did't work

<script type="text/javascript">
$('#expiry_date').datetimepicker({
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0
});

Answer 1

You need to call datepicker() on the datepicker element when it is actually rendered. This means when the modal with the element is rendered.

If necessary put a breakpoint before the

$('#expiry_date').datetimepicker and make sure the element is there in the DOM.

Remove your onclick method, you don't need to initialize the datepicker when there is a click event. This probably caused the weird - one time opened, one time not - behaviour.