Reputation: 10010
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
});
Upvotes: 2
Views: 1985
Reputation: 85528
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.
Upvotes: 1
Reputation: 1192
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
Upvotes: 0