How do I hide the calendar after a date is selected? Is there a specific function that I can use? My code below:
$('#dp1').datepicker({
format: 'mm-dd-yyyy',
startDate: '-15d',
autoclose: true,
endDate: '+0d' // there's no convenient "right now" notation yet
});
Any help would be appreciated.
This question is related to
jquery
twitter-bootstrap
datepicker
bootstrap-datepicker.js
var defaults = $.fn.datepicker.defaults
autoclose: true
Save and refresh your project and this should do.
The problem can be stopped, blocking hide event for input element by this linese:
var your_options = { ... };_x000D_
$('.datetimepicker').datetimepicker(your_options).on('hide', function (e) {_x000D_
e.preventDefault();_x000D_
e.stopPropagation();_x000D_
});
_x000D_
Use this for datetimepicker, it works fine
$('#Date').data("DateTimePicker").hide();
If it's any help to anyone, the Version 2.0 of the bootstrap datepicker no longer works with the accepted answer.
Here's how I got it working on mine:
$('yourpickerid').datepicker({
format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
$(this).datepicker('hide');
});
See http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate
If you're looking to override the behavior of the calendar in general, globally, try editing the Datepicker function (in my example it was line 82),
from
this.autoclose = false;
to
this.autoclose = true;
Worked fine for me, as I wanted to have all my calendar instances behave the same.
$('.datepicker').datepicker({
autoclose: true
});
I changed to datetimepicker and format to 'DD/MM/YYYY'
$("id").datetimepicker({
format: 'DD/MM/YYYY',
}).on('changeDate', function() {
$('.datepicker').hide();
});
Haven't seen this mentioned, but this is what fixed it for me:
switchOnClick: true
In bootstrap 4 use "autoHide : true"
$('#datepicker1').datepicker({
autoHide: true,
format: 'mm-yyyy',
endDate: new Date()
});
$('yourpickerid').datetimepicker({
pickTime: false
}).on('changeDate', function (e) {
$(this).datetimepicker('hide');
});
For datetime picker
$('yourpickerid').datetimepicker({
format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
$(this).datetimepicker('hide');
});
Having problem with clock still showing even if I i wrote format: 'YYYY-MM-DD',
I hade to set pickTime: false
and after change->hide I hade to focus->show
$('#VBS_RequiredDeliveryDate').datetimepicker({
format: 'YYYY-MM-DD',
pickTime: false
});
$('#VBS_RequiredDeliveryDate').on('change', function(){
$('.datepicker').hide();
});
$('#VBS_RequiredDeliveryDate').on('focus', function(){
$('.datepicker').show();
});
$('#input').datepicker({autoclose:true});
I got a perfect solution:
$('#Date_of_Birth').datepicker().on('changeDate', function (e) {
if(e.viewMode === 'days')
$(this).blur();
});
Close datetimepicker when date select(datetimepicker show date with time)
$('.datepicker').datepicker({
autoclose: true,
closeOnDateSelect: true
});
You can change source code, bootstrap-datepicker.js.
Add this.hide();
like ne
if (this.viewMode !== 0) {
this.date = new Date(this.viewDate);
this.element.trigger({
type: 'changeDate',
date: this.date,
viewMode: DPGlobal.modes[this.viewMode].clsName
});
this.hide();//here
}
At least in version 2.2.3 that I'm using, you must use autoClose
instead of autoclose
. Letter case matters.
Source: Stackoverflow.com