CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Hunain Usman
Hunain Usman

Reputation: 2228

bootstrap datepicker not working[displaying] on first click

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

Upvotes: 4

Views: 8385

Answers (3)

Laboquimia ICT SL
Laboquimia ICT SL

Reputation: 1

You have to include it in body onload tag:

<body onload="$('#fecha').datepicker();" ...

and also call it in your input (with class="datepicker") with onclick event :

<input id="fecha" name="fecha" class="default datepicker" onclick="$('#fecha').datepicker();" placeholder="FECHA">

Upvotes: 0

Robin Gomez
Robin Gomez

Reputation: 333

So maybe you need is this.

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

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

Upvotes: 1

dave
dave

Reputation: 64657

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.

Upvotes: 5

Related Questions