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
});

score 1 · Accepted Answer · answered Jun 10 '15 at 03:23

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.

You're a lifesaver - thanks. I don't mind commenting it out. If I may ask - how did you debug it? I tried to do a trace through Chrome on the click event but never did it point me to this section of code. — b85411, Jun 10 '15 at 03:31
One other question if you have a chance - how would I go about horizontally aligning that date picker? I tried `
` but it didn't change anything. Thanks. — b85411, Jun 10 '15 at 04:02

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

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

edited May 23 '17 at 12:30

Community

1
1

answered Jun 10 '15 at 02:58

Leo Silence

1,192
11
22

Datepicker is automatically disappearing

2 Answers2