Search code examples
jqueryfirefoxjquery-ui-datepickertwitter-bootstrap-2

jQuery datepicker issue when used on a Bootstrap prepended/appended input

In Firefox when clicking on the input field the datepicker doesn't show. No issues in Chrome or IE.

Here's my HTML:

<div class="input-append">
    <input id="start_date" name="start_date" class="date_field" type="text">
    <span class="add-on"><i class="icon-calendar"></i></span>
</div>

Here's my JavaScript:

$('.date_field').datepicker({
    dateFormat: 'dd.mm.yy',
    minDate: 0
});

Libraries and versions:

  • jQuery 1.7.1
  • jQuery UI 1.9.2
  • Bootstrap 2.2.2
Solution

  • I found a fix. I guess it was a CSS issue all along. Change the position property of the input field from relative to static.

    .input-append input { position: static; }

    Hopefully this helps other poor souls.