I am trying to add an event blur on input in order to hide a calendar.
The plugin I am using to show the calendar is the foliowing eternicode/bootstrap-datepicker.

Here is the source code /

var inputs = $('.datepicker').datepicker({
    autoclose: true
});

inputs.on('blur', function () {
          console.log($(this));
          // I would like to hide just the date picker
          //$(this).hide();
});

I am trying to add an event blur on input in order to hide a calendar.
The plugin I am using to show the calendar is the foliowing eternicode/bootstrap-datepicker.

Here is the source code http://jsfiddle.net/KLpq7/75/

var inputs = $('.datepicker').datepicker({
    autoclose: true
});

inputs.on('blur', function () {
          console.log($(this));
          // I would like to hide just the date picker
          //$(this).hide();
});

• javascript
• twitter-bootstrap
• jquery

4 Answers 4

You can try this:

var inputs = $('.datepicker').datepicker({
format: 'yyyy-mm-dd',
autoclose: true}).on('changeDate', function (ev) {
         $(this).blur();
         $(this).datepicker('hide');
     });

Fiddle: http://jsfiddle.net/KLpq7/82/

    inputs.on('blur', function () {
        inputs.datepicker('hide');
    });

This is a known bug* -- if you use "datepicker" as the class for your inputs, it will interfere with the datepicker code, because datepicker is also the class used for the picker pane. Using a different class for your pickers should fix the issue for now.

* There aren't any open tickets for it at the moment, but it is acknowledged as a minor bug

Try this updated fiddle. I think that since you were using a class selector there was some conflicts in the blur event handler. I have separated each calendar picker by ID and it seems to work fine now.