Datepicker is automatically disappearing

Question

Having some trouble with the bootstrap datepicker. (http://bootstrap-datepicker.readthedocs.org/en/latest/)

Basically, whenever I click anything outside of the datepicker it auto-hides/disappears.

I don't want this to happen - I want it to remain visible.

What do I do?

HTML:

<div class='row'>
    <div class='col-sm-12'>
        <div class='page-header page-header-with-icon mg-t'>
             <i class='fa-icon-calendar'></i>
             <h2>Training Calendar</h2>
        </div>
        <div class="row">
             <div class="col-sm-12">
                  <div class="datepicker" data-date-format="mm/dd/yyyy" data-date-autoclose="false"></div>
             </div>
        </div>
    </div>
</div>

jQuery:

$('.datepicker').datepicker({
    'autohide': false
});

Answer 1

Sad to say, there seems to be no option for preventing this. The guilty code is line 372-384 :

[$(document), {
     mousedown: $.proxy(function(e){
        // Clicked outside the datepicker, hide it
        if (!(
            this.element.is(e.target) ||
            this.element.find(e.target).length ||
            this.picker.is(e.target) ||
            this.picker.find(e.target).length
        )){
            $(this.picker).hide();
        }
    }, this)
}]

You need to modify that. You could simply comment out //$(this.picker).hide(); as in this example -> http://jsfiddle.net/j8emztmu/ or the entire block of code. Alternatively you could add a autoHide option yourself, but that seems not to be worth the effort, since you just want to get rid of the feature.

Answer 2

This is a simple sample can always make datepicker visible:

jquery:

$("#my-datepicker").datepicker().on('changeDate', function (e) {
   $("#my-input").val(e.format());
});

and DEMO

Need more details you can check this always-display-bootstrap-datepicker-not-just-on-focus