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

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

About this issue

Original URL
State: closed
Created 12 years ago
Comments: 15 (1 by maintainers)

Most upvoted comments

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.

eastside on Jun 11, 2013