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

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

• javascript
• jquery
• html
• twitter-bootstrap
• datepicker

4 Answers 4

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

After selecting the date from the drop down calendar you can just click anywhere outside the calendar to close it but if you want the calendar to be closed on selecting the date then do the following

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

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

You will need to EXPLICITLY add autoclose: true, otherwise, its default value is false.

Bootstrap datepicker has autoclose option set on false by default. You should set autoclose option on true.

Check out the reference: https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#quick-reference