bootstrap datepicker not working[displaying] on first click

Issue

I got Bootstrap datepicker in my form, at first it was working fine but now, after i used jquery .load function to load the form which contained the datepicker element, it wont work/show itself upon first click but when i click outside and click again then gives me this error in console of firebug:

TypeError: date is undefined
[Break On This Error]   

var parts = date.split(format.separator),

and the datepicker appears....

i have 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');
  });
})  

Solution

You need to initialize your datepicker before they click. You probably should use a callback on .load:

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

This way the element exists, and you tell it what to do when they click BEFORE they click.

Answered By - dave