Bootstrap datepicker doesn't close

Question

I have read that this bug was fixed but doesn't really seem so. I have a boostrap modal appearing when I create an new employee in my website. And I am using the following to create a datepicker for the date of birth of the new employee.

<div class="input-group date insertInfo" data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
 </div>

and then after the load of my js scripts (first I load bootstrap and then bootstrap-datepicker.js) I use:

<script type="text/javascript">
    $(function () {
        $('.datepicker').datepicker({
            format: 'mm-dd-yyyy'
        });
    });
</script>

Unfortunately what happens is that I can select the date on the drop down calendar shown by the datepicker, but once selected I cannot close it anymore. Can you maybe help me with this issue? Thanks in advance

Answer 1

You must do the following:

1. Correct your class reference
2. Enable autoclose
3. Override button

When you setup the datepicker, you are referencing a non-existant class ('.datepicker'). Besides that, you need to include the 'autoclose' field and customize the behaviour of the button to make it both open and close the calendar.

HTML

<div class="input-group date insertInfo" data-provide="datepicker">
  <input type="text" class="form-control">
  <div class="input-group-addon close-button">
    <span class="glyphicon glyphicon-th"></span>
  </div>
</div>

JS

// Setup datepicker

$('.date').datepicker({
  format: 'mm-dd-yyyy',
  autoclose: true
});

// Unbind default events

$('.close-button').unbind();

// Specify new behaviour

$('.close-button').click(function() {
  if ($('.datepicker').is(":visible")) {
    $('.date').datepicker('hide');
  } else {
    $('.date').datepicker('show');
  }
});

If you want to see a working version: JSFIDDLE