Bootstrap-datepicker: Uncaught TypeError: Cannot read property 'top' of undefined

[joelkinzel]

Using the latest version of the datepicker I'm getting this error. Following my code:

<div class="control-group">
    <label class="control-label" for="question-15">Start Date:</label>  
    <div class="controls">
        <input type="text" name="start_date[response]" value="" id="question-15" class="required date">
    </div>
</div>
<div class="control-group">
    <label class="control-label" for="question-16">End Date:</label>    
    <div class="controls">
        <input type="text" name="end_date[response]" value="" id="question-16" class="required date">
    </div>
</div>
<script>
$(function(){
    $('.date').datepicker();
});
</script>

When I attempt to do this, I'm getting the following error:
Uncaught TypeError: Cannot read property 'top' of undefined in bootstrap-datepicker.js on line 148

[brutuscat]

Same here....

[eternicode]

That html and js seems to be working for me in the latest master.

[RomanBrodetski]

same here

[eastside]

I encountered this problem today. I'm using the latest version of bootstrap-datepicker.js along with jquery 1.9.1.

If you have an element with the 'date' class but that element doesn't contain an element with the 'add-on' class, then bootstrap-datepicker.js will fail on line 155 with the error in the ticket.

Here's some sample code from my project:

<input type="text" class="input-small date" id="begin_date" name="begin_date" data-date-format="mm/dd/yyyy">

<script type="text/javascript">
$("body").delegate(".date", "focusin", function() {
  $(this).datepicker();
});
</script>

[anthonymartin]

I'm also getting this with jquery 1.9.1

[YakupIpek]

I'm also getting this with jquery 1.9.1 :+1:

[ejacky]

I'm also getting this with jquery 1.9.1

[Ricardonacif]

Anyone solved this?

[eastside]

The documentation doesn't specify this very well, but if you get this error, this is what you're doing wrong: You have an element with a 'date' class, but that element doesn't contain an element with contains an 'add-on' class.

If you have a single input element that you want to be a date field all on it's own, it should NOT have the 'date' class, but SHOULD have the attribute data-date-format. For example, the following markup is correct:

<input type="text" class="span2" value="02/16/12" data-date-format="mm/dd/yy" id="dp2" />

The following markup is incorrect:

<input type="text" class="span2 date" value="02/16/12" data-date-format="mm/dd/yy" id="dp2" />

If you have a div with the 'date' class, then it needs a contained element that has the 'add-on' class. For example:

<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
  <input class="span2" size="16" type="text" value="12-02-2012" readonly="" />
  <span class="add-on"><i class="icon-calendar"></i></span>
</div>

In other words, when you get this error, it's basically saying "Hey the 'date' class means that you want to use this calendar icon thing, but I can't find the class with the 'add-on'! Fix it!" But of course the error message isn't very helpful and could be improved.

I tried to explain in my comment on February 27, 2013, but I realize how that my explanation was pretty terrible.

[Ricardonacif]

Now I got it. Thanks for the explanation, but I've already used another solution anyway.

Thanks

[joelkinzel]

@Melkster Thanks for the clarification.

[delahappy]

I am getting the same error but I am not using the date class.

<div class="input-group">
  <span class="input-group-addon datepickerbutton">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
  <input class="form-control" id="datetimepicker" data-date-format="yyyy-MM-dd hh:mm:00" name="date" type="text" value="2014-08-22 03:09:00">
</div>

Any ideas what could cause this?

[delahappy]

Actually I was able to switch the markup around to this and it worked.

<div class="input-group"><label for="date">Date</label></div>
<div class="input-group input-append date" id="datetimepicker">
  <input class="form-control" data-format="yyyy-MM-dd hh:mm:00" name="date" type="text" value="2014-09-04 13:00:00" id="date">
  <span class="input-group-addon add-on">
    <i data-time-icon="glyphicon glyphicon-time" data-date-icon="glyphicon glyphicon-calendar"></i>
  </span>
</div>

[grandmanitou]

Same problem for me. But it's solved.
I had to change my input's classname from 'form-control date' to 'form-control form-date' to make it work.

[GabrieleMartini]

Same issue for jQuery v1.10.1 , and same solution: using class different than 'date' make it working.