Bootstrap datepicker does not work [display] on first click

Question

I had a Bootprap datepicker in my form, at first it worked fine, but now, after I used the jquery.load function to load the form containing the datepicker element, it will not work / show itself on the first click, but when I click outside and click again, and then gives me this error in firebug console:

TypeError: date is undefined [Break On This Error] var parts = date.split(format.separator), 

and the date picker will appear ....

I used this javascript to hide the datepicker:

 $(document).on('click','.datepicker', function() { $('.datepicker').datepicker({ format: "yyyy-mm-dd" }).on('changeDate', function (ev) { $(this).blur(); $(this).datepicker('hide'); }); }) 

Answer 1

You need to initialize your datepicker before clicking. You should probably use a callback for .load:

 $('#formdiv').load('yourform.php', function() { $('.datepicker').datepicker({ format: "yyyy-mm-dd" }); }); 

So the element exists, and you tell it what to do when it is clicked before it is clicked.

Answer 2

So maybe you need this.

https://github.com/eternicode/bootstrap-datepicker/issues/500#issuecomment-34662552

where $ ('. datepicker') is the selector.